Question

我在标题内的DIV中有一个H1元素：

<header class="container_12">
   <div class="grid_3">
       <h1><b>xx</b></h1>
   </div>
</header>

和以下CSS：

.container_12 .grid_3 {
    width: 23%;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
    margin-left: 0.99%;
    margin-right: 0.99%;
}
header h1 {
    margin:0 auto; 
text-align:center;
    display: inline;
    line-height: 77px;
    color: #ddd;
    font-size: 4em;
    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}

我正在寻找一些建议。我想将“xx”文本放在grid_3的中间位置 “xx”左右和左侧的空间量。

Answer 1

你需要：

text-align:center;

应该诀窍，应用于h1。

这是一个小提琴：

http://jsfiddle.net/qGaCY/1/

Answer 2

.grid_3 {
    text-align: center;
}

注意：HTML5中不推荐使用<b>..</b>。请改用<strong>..</strong>。

Answer 3

您可以这样做：

text-align: center;

https://developer.mozilla.org/en-US/docs/CSS/text-align

margin: 0 auto;

https://developer.mozilla.org/en-US/docs/CSS/margin

 .container_12 .grid_3 {
    width: 23%;
 }

 .container_12 > .grid_3 > h1 {
    text-align: center
 }

您当前示例的jsfiddle：http://jsfiddle.net/bxG27/

Answer 4

h1 {
    text-align:center;
    line-height: 77px;
    color: #ddd;
    font-size: 4em;
    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}

JSFiddle。我已将标题指向深色背景，因此您可以轻松地看到文本是居中对齐的。正如我在你的帖子评论中提到的那样，你的h1上的display:inline;是导致它失败的原因，因为宽度不适用于内联元素。

如何将div中的文本居中，左右相同的空格？

4 个答案: