DIV中的中心对齐文本与“display:table-cell”

时间:2015-12-01 11:33:18

标签: html css

概述

我有一个宽度可变的图像,左边是对齐的,右边有文字(长度可变)。

我正在尝试使最右边的div元素(包含文本)的宽度填充剩余的宽度,使文本水平和垂直居中。

但是,我找不到一种方法来水平对齐文本。

代码

正如您在下面的代码中看到的那样,当文本的长度超过一行时,文本将仅位于最右侧的div中 - 但是,在我的项目的许多实例中,代码要小得多(此示例仅为“居中文本”),文本左对齐:

<hr>
<div style="float:left; height: 75px;">
  <img src="//i.imgur.com/rJD1cRy.png" style="margin:auto;display:block;">
</div>
<div style="width: 100%;">
  <div style="display: table; height: 75px; overflow: hidden;">
    <div style="font-style: italic; color: #777; display: table-cell; vertical-align: middle; text-align: center;">
      Centered Text
    </div>
  </div>
</div>
<div style="clear: both;"></div>
<hr>

2 个答案:

答案 0 :(得分:1)

水平对中最右边的div, 将margin:0 auto添加到div应该可以解决问题:

&#13;
&#13;
<hr>
<div style="float:left; height: 75px;">
  <img src="//i.imgur.com/rJD1cRy.png" style="margin:auto;display:block;">
</div>
<div style="width: 100%;">
  <div style="display: table; height: 75px; overflow: hidden; margin:0 auto;">
    <div style="font-style: italic; color: #777; display: table-cell; vertical-align: middle; text-align: center;">
      Centered Text
    </div>
  </div>
</div>
<div style="clear: both;"></div>
<hr>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

  <hr>
<div style="float:left; height: 75px;">
  <img src="//i.imgur.com/rJD1cRy.png" style="margin:auto;display:block;">
</div>
<div style="width: 100%;">
  <div style="display: table; height: 75px; overflow: hidden; width: 60%;">
    <div style="font-style: italic; color: rgb(119, 119, 119); display: table-cell; vertical-align: middle; text-align: center;">
      Centered Text
    </div>
  </div>
</div>
<div style="clear: both;"></div>
<hr>