0

I've tried something, but vertical align doesn't work.

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/

How can I make the text align middle regardless of the length of the content?

4

5 回答 5

1

尝试使用以下 CSS：

div {
    text-align: center;
}
于 2013-02-01T13:01:04.143 回答
0

您需要display: table在父级和display: table-cell子级上使用垂直对齐才能工作。

这是一个工作示例：http: //jsfiddle.net/sCWfS/3/

于 2013-02-01T13:04:56.053 回答
0 
div.browseBuildsArea-pro div.build-poster {
display: block;
 position: relative;
    text-align: center;}
于 2013-02-01T13:05:19.263 回答
0

垂直对齐 css 属性不适用于 div。看看这个答案：
div中元素的垂直对齐

于 2013-02-01T13:04:07.283 回答
0

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

而不是跨度使用带有边距的DIV：0 auto？

div.middle-text {
    margin: 0 auto;
}
于 2013-02-01T13:00:39.280 回答