0

div我在一个容器中有两个s div，我试图将一个子 div 放置在中心（垂直和水平），另一个放置在容器的左上角/右下角。

两个孩子div都只包含文本。我尝试了一些东西，并且能够单独应用这两种样式，即如果只有两个divs 中的一个在那里，它将按要求工作。我无法弄清楚如何让两种样式同时应用。我尝试过使用位置和 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

4

2 回答 2

1

只需给.containerdivposition: relative;然后position: absolute;给子 div 以同时定位它们，使用left和top属性：

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

display: table-cell如果你走这条路，你只需要摆脱它就不需要了。

于 2013-02-27T15:39:49.290 回答
0

你的细胞表现得像<TD>一个<TR>.

只需将您的 DIVS 封装在 TableRow 之类的东西中

http://jsfiddle.net/E5zGw/6/

带有背景颜色的 jsFiddle

CSS 添加：

.table-row {
    display:table-row;
    clear:both;
}

添加的HTML：

<div class="container">
    <div class="table-row">
        <div class="topLeft">value</div>
    </div>
    <div class="table-row">
        <div class="center">label</div>
    </div>
</div>

女巫一模一样：

<table style="width:100%">
    <tr>
        <td valign="top" align="left">value</td>
    </tr>
    <tr>
        <td valign="middle" align="center">label</td>
    </tr>
</table>

现在，让我尝试按照您认为自己想要的方式安装它：

jsfiddle.net/E5zGw/15/

<div class="container">
    <div class="topLeft">value</div>
    <div class="center">label</div>
</div>

.topLeft {
    background-color:blue;
    text-align:left;
    display:table-cell;
    vertical-align:top;
    z-index:999;
    position:absolute;
    width:200px;
}
于 2013-02-27T15:37:44.623 回答