我在容器 div
中有两个 div
并且我试图将其中一个子 div 放置在中心(垂直和水平),另一个在顶部 -容器的左/右下角。
两个子 div
都只包含文本。我尝试了一些东西,并且能够单独应用这两种样式,即如果只有两个 div
中的一个在那里,它就会按要求工作。我无法弄清楚如何让两种样式同时应用。我试过使用位置和 z-index,但由于我有限的 CSS
知识,我一直未能取得突破。
更新:我希望文本相对于外部容器居中。
HTML
Top left works
<div class="container">
<div class="topLeft">value</div>
</div>
Center Works
<div class="container">
<div class="center">label</div>
</div>
Both don't work simulaneously
<div class="container">
<div class="topLeft">value</div>
<div class="center">label</div>
</div>
CSS
.container {
border-width:1px;
width:200px;
border-style:solid;
display:table;
height:300px;
}
.center {
text-align:center;
display:table-cell;
vertical-align:middle;
z-index:5;
}
.topLeft {
text-align:left;
display:table-cell;
vertical-align:top;
z-index:10;
}
演示
http://jsfiddle.net/jugal/E5zGw/
我主要针对 IE8+ 和 chrome,并且可以根据需要灵活地更改 html 和 css
最佳答案
只需将 .container
div position: relative;
然后 position: absolute;
给子 div 以同时定位它们,使用left
和 top
属性:
JsFiddle:http://jsfiddle.net/E5zGw/14
你只需要摆脱 display: table-cell
因为如果你这条路线不需要它。
关于css - 将两个子 div 放置在另一个 div 中,一个居中,另一个在右上角/右下角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15115829/