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 
.grid_3 {
    text-align: center;
}

注：<b>..</b>HTML5では非推奨です。<strong>..</strong>代わりに使用してください。

于 2013-02-13T09:12:00.597 に答える
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 に答える
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。見出しに暗い背景を付けたので、テキストが中央に配置されていることが簡単にわかります。あなたの投稿へのコメントで述べたように、display:inline;幅はインライン要素に適用されないため、h1が失敗の原因になっています。

于 2013-02-13T09:16:39.887 に答える