css - 将 img、span 和 div 与底部边框对齐

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 以正确反射(reflect) response-part.div 为空的场景(初始状态，用户与页面交互时可能的过渡状态。)更新了 fiddle

UPDATE2:我通过在响应部分的初始 html 中添加一个初始元素，然后在用户删除所有其他元素时重新添加一个元素，“修复”了没有子元素时发生的问题元素。有点骇人听闻，如果可能的话，将不胜感激不涉及此解决方法的修复程序。更新 fiddle

PS:我最初考虑使用 bootstrap v4 (支持 flexbox)但它仍然是 alpha。或者，我也研究了使用 FlexboxGrid ，但是我仍然需要其他功能的 Bootstrap ，并且 FlexboxGrid 使用类似的类(“行”等)作为 Bootstrap ，我认为这会导致名称冲突(如果我在我的元素中包含这两个，例如:将使用哪个“行”类!)

Answer 1

尝试在您的响应部分类上使用 display: flex;。像这样:

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

我编辑了你的 fiddle 。看一看:https://jsfiddle.net/gusLnyyh/6/