我有一个宽度可变的图像,左边是对齐的,右边有文字(长度可变)。
我正在尝试使最右边的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>
答案 0 :(得分:1)
水平对中最右边的div,
将margin:0 auto
添加到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; 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;
答案 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>