Question

我试图将文本居中于父元素。这是我的代码。

HTML 的

<div class="header"><!--header-->
<span class="child">

<h1 class="h1temp">
        <div class="left">Hello</div>
        <div class="left down">There</div>
        <div class="left downer">James</div>
</h1>

</span>
</div><!--header-->

CSS

.header {
    height: 200px;
    background-color:#C0C0C0;
    position:relative;
}
.child {
    position:absolute;
    margin:50% auto;
    width:900px;
}
.h1temp {
    margin:0 auto;
    font-size: 20px;
}

问题是文本与浏览器对齐，而不是父元素。以下是目前的jsFiddle。

Answer 1

我假设您要对齐h1temp。

margin: x auto仅在元素具有宽度

时有效

.h1temp {
    margin:0 auto;
    font-size: 20px;
    width: 500px;
}

Answer 2

只需将display:table;写入.h1temp

即可

将文本居中于父元素

2 个答案: