0

私は現在、このマークアップを持っています:

<h1 class="title" id="page-title">
    <span id="page-title-inner">Home</span>
</h1>

そしてこのCSS：

h1#page-title { 
    background: transparent url(../images/line.png) 0px 6px no-repeat;
    overflow: hidden;
}

#page-title-inner { 
    width: auto; 
    float: left; 
    background: #fff; 
    padding: 0 15px; 
    position: relative; 
    left: 45%; 
}

この CSS は、ページ タイトルが短いことを考えると、私が望むことをわずかに達成しています。ただし、タイトルが非常に長い場合は、中央から右側のスペースを埋めます。

私が本当に達成したいのは、幅に関係なく、スパン (h1 タグ内) 内にラップされたページ タイトルを中央に配置することです。

私は次のようなことをしようとしました:

#page-title-inner { 
    width: auto; 
    float: left; 
    background: #fff; 
    margin: 0 auto;
    display: block;
}

マージン 0 の自動値は、スパンを中央に配置するものですが、なぜ機能しないのだろうかと思います。

私がやりたいことを達成するためのより良い方法とより効率的な方法はありますか?

4

2 に答える 2

4

スパンのfloat:left&プロパティを削除して中央にします。H1タグにleft:45%も設定します。text-align:center

于 2013-09-23T07:53:59.060 に答える
1

スパンで何か特別なことをしない限り、必要ありません。

<h1 class="title" id="page-title">
    Home
</h1>
h1#page-title { 
    background: transparent url(../images/line.png) 0px 6px no-repeat;
    overflow: hidden;
    text-align: center;
}

スパンで何かをする必要がある場合：

#page-title-inner { 
    /*width: auto;  */
    /*float: left;  */
    background: #fff; 
    padding: 0 15px; 
    /*position: relative; */
  /*  left: 45%; */
}

左にフロートすると、左にフロートします。また、スパンのコンテンツはさまざまなサイズになる可能性があるため、左のパーセンテージは機能しません。

実際には、スパンに ID を与える必要はありません。これを簡単に行うことができます。

h1#page-title span{ /* ... */ }
于 2013-09-23T07:58:35.573 に答える