Question

我很难过。我试图弄清楚如何垂直居中对齐带边框的div，带有图像的div的右边。一般问题是如何垂直居中对齐任何其他div旁边的div。不只是div的文本内容。我在这里看到了许多可能的解决方案，但没有一个可行。

这对于一个表来说几乎是微不足道的，但是我们不应该再使用表来进行定位了。我正在寻找避免使用桌子的方法。我找不到一个。不使用表格进行定位的原因之一是它们有多混乱。我得到了那些专家的消息。与尝试使用div进行此操作相比，它可能更令人困惑。

我有两个示例页面。标题反映了我目前的态度，这就是为什么不使用表格呢？

<style type="text/css">
.mybox {
    display:inline-block;
    margin:0px 1em;
    padding:1em;
    border-style:solid;
}
</style>
...
<table style="width:100%">
  <tr>
    <td>
      <img alt="" src="http://angelichomeservices.com/AHS.jpg" width=315 />
    </td>
    <td>
      <div class=mybox>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </td>
  </tr>
</table>
...
<div style="width:100%;">
    <img alt="" src="http://angelichomeservices.com/AHS.jpg" width=315 />
  <div class=mybox style="width:calc(100% - 315px - 4em - 6px);float:left;vertical-align:middle;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

最好的例子是使用表格，它正是我想要的。我可以缩小或放大页面的宽度，其中包含文本的div缩小并放大并垂直居中保留在图像上。

最底层的例子是我尝试使用div进行定位，但我所能做的就是让两者在顶部垂直对齐。此外，必须在css中使用calc（）可能不是解决任何问题的最安全方法。

任何人都有解决方案吗？随意抓住代码，发疯。提前谢谢。

Answer 1

CSS表似乎是一种解决方案。

JSFiddle demo

＆＃13;

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid grey;
}

＆＃13;

<div class="parent">
  <div class="mybox child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <img class="child" alt="" src="http://angelichomeservices.com/AHS.jpg" />
</div>

＆＃13;

如何垂直居中对齐div元素与文本

1 个答案: