作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
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 内的内容都会自动居中对齐。)
尝试了好几种方法,但都没有用。 (例如显示:表格单元格;)我怎样才能做到这一点?一个小例子会让我继续前进。
最佳答案
要在中间对齐文本,您需要 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;
}
关于css - 试图让我的 div 居中。我究竟做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14647710/
我是一名优秀的程序员,十分优秀!