我在容器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

最佳答案

只需使用.containerposition: relative;属性将position: absolute; div left然后是top赋予子div以同时定位它们:

JsFiddle:http://jsfiddle.net/E5zGw/14

您只需要除去display: table-cell,因为如果使用此路由,则不需要它。

关于css - 将两个子div放置在一个div的居中位置,将另一个子div放在另一个div的右上/右下,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15115829/

10-12 12:55
查看更多