Div in div定位

Question

我在div内有div，我想将div置于中心位置。

<div class=\"dialogs-icon\"><img src=\"images/space.png\" width=\"25\" height=\"25\" class=\"d-icon\"><div class=\"messages\">hi</div></div>

<style>
.dialogs-icon {
    display: inline;
    position: relative;
}

.d-icon {
    width: 25px;
    height: 25px;
    margin: 5px 15px 5px 5px;
}

.messages {
    width: 250px;
    position: absolute;
    top: 50px;
}
</style>

如何将.messages置于.dialogs-icon的中心位置？

我想进行水平中心定位

Answer 1

在要居中的div中使用margin: auto。

<style>
.dialogs-icon {
    display: inline;
    position: relative;
}

.d-icon {
    width: 25px;
    height: 25px;
    margin: 5px 15px 5px 5px;
}

.messages {
    width: 250px;
    margin: auto;
    top: 50px;
}
</style>

Answer 2

试试这个

.messages{
    width:250px
    margin:0px auto; //This will center your content but it needs width to be defined
}

使用中心标记还有另一种方法。请注意，中心标记已从htm5中删除，但它仍可在浏览器中使用 嗨

Answer 3

要水平居中并将绝对位置混合在一起，您可以使用.messages框作为在页面整个宽度上喷涂的容器，并将其内容集中在其中：

<强> DEMO

HTML

<div class="messages">
        <p>hi</p>
</div>

CSS

.dialogs-icon {
}
.d-icon {
    width: 25px;
    height: 25px;
    margin: 5px 15px 5px 5px;
}
.messages {
    width:100%;
    position:absolute;
   left:0;
}
.messages p {
    width:50%; /* or whatever */
    border:solid;
    background:white;
    margin:auto;
}