Question

我有一个图像，跨度中的单个字符（等号），然后是一个div，其中子元素通过js添加/替换。

然而，我不能为我的生活弄清楚如何使它完全对齐（担心我思考并使其复杂化。）

我也使用bootstrap的网格（行/列）系统。

类似于......

<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
  <div class="response-part">
    <img src="foo" />
    <span class="opensans">=</span>
    <div id="rp1" class="opensans inline" style="width: 50px;">
    </div>
  </div>
</div>
<div class="col-lg-2">
  <div class="response-part">
    <img src="foo" />
    <span class="opensans">=</span>
    <div id="rp2" class="opensans inline" style="width: 50px;">
      <span class="opensans">X</span>
    </div>
  </div>
</div>
</div>
</div>

请参阅jsfiddle

希望图像居中的中间沿等号（垂直对齐）以及相邻div内的跨度（，该跨度中的文字只显示底线的几个像素。）

我看到this，但没有一个解决方案能解决我的问题（我只能猜测是因为第三个元素和字体等）。

UPDATE1 ：编辑样本html以正确反映response-part.div为空的场景（初始状态，用户与页面交互时可能的过渡状态。）更新{{3} }

UPDATE2 ：我＆＃34;已修复＆＃34;通过在响应部分的初始html中添加初始元素，然后在用户删除所有其他元素时添加一个元素，就会出现没有子元素的问题。有点hackish，如果可能的话，我会很感激修复并没有涉及这个解决方法。更新了fiddle

PS ：我最初考虑使用fiddle（使用flexbox支持），但它仍然是alpha版。或者，我也研究过使用bootstrap v4，但是我仍然需要bootstrap用于其他功能，而FlexboxGrid使用类似的类（＆＃34; row＆＃34;等）作为bootstrap，我认为会导致名称冲突（如果我在我的项目中包括了两个，例如：将使用哪个＆＃34; row＆＃34;类！）

Answer 1

尝试在响应部分课程中使用display: flex;。像这样：

.response-part {
    display: flex;
    align-items: center;
 }

我编辑了你的小提琴。看看它：https://jsfiddle.net/gusLnyyh/6/

将img，span和div与底部边框对齐

1 个答案: