Question

这可能是一个愚蠢的问题，但我无法弄清楚如何得到这个。

编辑：我只想将文本水平居中而不是图像，图像必须保持文本的基线

<div> <img style="width:30px;height:60px;vertical-align:bottom;display: inline" src="http://placekitten.com/100"> <span style="text-align:center;">This won't work.</span> </div>

http://jsfiddle.net/Hyx5n/39/

Answer 1

取消span并将style="text-align:center;"应用于div。

Answer 2

你需要水平居中，然后使用

div {
  text-align: center;
}

看看这里！ :) http://jsfiddle.net/afzaal_ahmad_zeeshan/Hyx5n/41/

这样，div（而不仅仅是文本）中的所有元素都将放在中心。这样，您就可以在中心获取图像。

Answer 3

以Afzaal Ahmad Zeeshan的回答为基础......

将文本放在2张相同的图像之间。在包含div上设置text-align:center。这使图像文本图像成为一个整体。

然后隐藏第二张图片。

HTML：

<div>
    <img src="http://placekitten.com/100">
    This works now.
    <img src="http://placekitten.com/100" class="cannot-see-me">
</div>

CSS：

div {
    text-align: center;
}

img {
    width:30px;
    height:60px;
}

.cannot-see-me {
    visibility: hidden;
}

这是有效的，因为visibility:hidden使元素不可见，但它仍占用页面上的空间。因此，请使用此处而不是display:none。

Answer 4

将vertical-align:bottom更改为vertical-align:middle并将text-align:center设为<div>

jsFiddle

<div style="text-align:center">
   <img style="width:30px;height:60px;
vertical-align:middle;display: inline" src="http://placekitten.com/100">
   <span style="text-align:center;">This won't work.</span>
</div>

如何将div中的文本居中对齐？

4 个答案: