Question

我尝试了一些东西，但垂直对齐并不起作用。

HTML：

<div class="browseBuildsArea-pro">
    <img class="champion" src="http://wiki.guildwars.com/images/d/d3/60px-Ranger-tango-icon-200.png">
    <div class="build-poster">
        <span class="middle-text">
            aaaaaaaaaaaa<br>
            bbbbbbbbbbbb<br>
            ccccccccccccc<br>
            dddddddddddd<br>
        </span>
    </div>
</div>

CSS：

div.browseBuildsArea-pro {
    float: left;
    position: relative;
    width: 790px;
    height: 90px;
    background-image:url('http://revistaverzus.com/online/background.jpg');
    background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion {
    float: left;
    display: block;
    height: 72px;
    margin-left: 14px;
    margin-top: 7px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -khtml-border-radius: 9px;
    -webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster {
    display: block;
    position: relative;
    margin-left: 150px;
    margin-top: 10px;
}
span.middle-text {
    vertical-align: middle;
}

http://jsfiddle.net/sCWfS/1/

无论内容的长度如何，如何使文本对齐？

Answer 1

尝试使用以下CSS：

div {
    text-align: center;
}

Answer 2

你尝试过这个吗？ http://jsfiddle.net/sCWfS/2/

而不是跨度使用带边距的DIV：0自动？

div.middle-text {
    margin: 0 auto;
}

Answer 3

vertical-align css属性不适用于div。看看这个答案：
Vertical alignment of elements in a div

Answer 4

您需要在父级上使用display: table，并在子级上使用display: table-cell以使vertical-align工作。

以下是一个有效的例子：http://jsfiddle.net/sCWfS/3/

Answer 5

div.browseBuildsArea-pro div.build-poster {
display: block;
 position: relative;
    text-align: center;}

div内的文本应始终与中间对齐

5 个答案: