css - 试图让我的 div 居中。我究竟做错了什么？

Question

CSS

div.browseBuildsArea-pro {
float: left; 
position: relative;
width: 790px; 
height: 90px; 
background-image:url('images/builds/builds-bg-pro.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 {
float: left;
display: block;
margin-left: 10px;
margin-top: 10px;
}

div.progress-for-build-listing {
float: left;
width: 250px; 
margin-left: 400px;
margin-top: 0px;
}

HTML

<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">

<div class="build-poster">
    Test Message
</div>

<div class="progress progress-for-build-listing">
    <div class="progress-bar" style="width: 100%;"></div>
</div>
</div>

我想要实现的是基本的。

我希望“测试消息”内容自动对齐到 div 的中间。（不管字符串的长度）此外，右侧的“进度条”和其他 div 也应该自动居中到中间。

这是我正在寻找的内容的预览。 （div 和 div 内的内容都会自动对齐到中间。）

尝试了几件事，但都没有奏效。（例如显示：表格单元格；）我怎样才能做到这一点？一个小例子会让我继续前进。

Answer 1

要在中间对齐文本，您的 CSS 中需要 2 个参数。

display:table-cell;
vertical-align:middle;

此外，您的 div 缺少高度。你必须添加它来对齐它。对于您的代码，它将是：

div.browseBuildsArea-pro div.build-poster {
float: left;
display:table-cell;
vertical-align:middle;
height:72px;
text-align:center; // if you also want it to align in the middle horizontally
margin-left: 10px;
margin-top: 10px;
}

Answer 2

对于垂直对齐检查这篇文章： http: //phrogz.net/css/vertical-align/index.html

并利用我从上述文章中看到的内容：http: //jsfiddle.net/tf7Cb/

如果您需要，这用于水平居中：

div.browseBuildsArea-pro div.build-poster {
   float: left;
   display: block;
   margin-left: 10px;
   margin-top: 10px;
   text-align: center;
}