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

Question

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

但是，我终其一生都无法弄清楚如何将所有内容正确对齐（担心我过度思考并使其复杂化。）

我也在使用引导程序的网格（行/列）系统。

类似于...的东西

<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 为空的情况（初始状态，用户与页面交互时可能的过渡状态。）更新 fiddle

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

PS：我最初考虑使用 bootstrap v4（支持 flexbox），但它仍然是 alpha。或者，我也考虑使用FlexboxGrid，但是我仍然需要其他功能的引导程序，并且 FlexboxGrid 使用类似的类（“行”等）作为引导程序，我认为这会导致名称冲突（如果我将两者都包含在我的项目中，例如：将使用哪个“行”类！）

Answer 1

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

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

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