2

以下の2つのシナリオをカバーしたいとしましょう（タイトルは動的です）：それはIE8 +のCSSのみ（JSなし）で達成できますか？

シナリオA：ページ幅に対して中央に配置される短いヘッダータイトル

| back button |                 short Title                             |
<-----------------------------------|----------------------------------->

シナリオB：戻るボタンにオーバーレイせずにヘッダーコンテンツ領域を埋めるための非常に長いヘッダータイトル

|             | Very very very very very very very very very very very  |
| back button | Very very very very very very very very long Title      |
<-----------------------------------|----------------------------------->
4

1 に答える 1

0

私が考えることができる2つの方法：

戻るボタンを左にフロートさせると、タイトルが自然に折り返されます。

HTML

<div>

    <a href="#" class="back">Back</a>

    <h1>Title</h1>

</div>

CSS

div {
    text-align: center;
}

a.back {
    float: left;
    margin-right: 20px;
}

または、このように、同じ HTML - 右側にも同じ 100px のパディングがない限り、これが適切に中央揃えにならないことに気付きました。

div {
    position: relative;
    min-height: 30px;
    padding-left: 100px;
    text-align: center;
}

a.back {
    position: absolute;
    top: 50%; left: 0;
    width: 90px;
    height: 30px;
    margin-top: -15px;
}

2 番目のものは、折り返しの問題を回避し、ボタンを中央に垂直方向に揃えます。

それが役立つことを願っています:)

于 2012-02-29T11:28:54.407 に答える