Question

概述

我有一个宽度可变的图像，左边是对齐的，右边有文字（长度可变）。

我正在尝试使最右边的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>

Answer 1

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

＆＃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;

Answer 2

  <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>

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

概述

代码

2 个答案: