0

我在标题内的 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”的左右两侧有相同的空间。

4

4 回答 4

2

你需要：

text-align:center;

应该做的伎俩，应用于h1。

这是一个小提琴：

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

于 2013-02-13T09:08:57.790 回答
2

你可以这样做：

  1. text-align: center;

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

  1. 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/

于 2013-02-13T09:16:56.017 回答
2 
.grid_3 {
    text-align: center;
}

注意：<b>..</b>在 HTML5 中已弃用。改为使用<strong>..</strong>。

于 2013-02-13T09:12:00.597 回答
0 
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. I've given the heading a dark background so you can easily see that the text is centrally aligned. As I mentioned in my comment on your post, display:inline; on your h1 is what's causing it to fail for you, as widths are not applied to inline elements.

于 2013-02-13T09:16:39.887 回答