如何在div中居中对齐文本div？ [英] How can I center align text within div horizontally?

问题描述

这可能是愚蠢的问题，但我不能弄清楚如何获得这个。

This may be the stupid question,but I can't figure it out how to get this.

编辑：我只想水平地图像和图像必须保持文本的基线

edit: I just want to center only text horizontally not the image and the image must be remain baseline to the text

< div>
< img style =width：30px; height：60px; vertical-align：bottom; display：inlinesrc =http://placekitten.com/100>
< span style =text-align：center;>这将无法使用。< / span>
< / div>

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

推荐答案

建立在Afzaal Ahmad Zeeshan的回答...

Building on Afzaal Ahmad Zeeshan's answer...

将文本放在2个相等的图片之间。在包含div上设置 text-align：center 。

Put the text between 2 equal images. Set text-align:center on the containing div. This centers the image-text-image as a group.

然后隐藏第二个图片。

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 。

This works because visibility:hidden makes an element invisible, but it still takes up space on the page. So use that here instead of display:none.

这篇关于如何在div中居中对齐文本div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！