1

フローティング要素にネストされている div (ナビゲーション ボタン) の中央に垂直テキストを正確に表示しようとしました。size,magin:auto, vertical-align を設定しましたが、テキストは中央に対して端にあります。絶対配置を使用せずにテキストをあるべき場所に配置する他の方法はありますか?

<nav>
      <div class="button"><p class="rotare">1st button</p></div>
      <div class="button">1</div>
      <div class="button">1</div>
      <div class="button">1</div>
</nav>

nav {
    width: 50px;
    height: 600px;
    background-color: red;
    margin-left: 0px;
    top:0px;
    position: absolute;
    display: inline-block;
    float:left;
}

.button {
    width: 50px;
    height: 150px;
    background-color: pink;
}

.rotare {
        position: relative;
        text-align: center;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        background-color: white;
        margin:auto;
        vertical-align: middle;
        width: 100px;
        height: 20px;
}
4

1 に答える 1

2

絶対配置でこれを行うことができますが、これらのルールを既存の css に追加するだけで、手動でコンテンツをその場所にプッシュする必要はありません。

.button {
    position: relative;
}

.rotare {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}

これが実際の JS Fiddle です: http://jsfiddle.net/grammar/NgrWg/ そして、この垂直センタリングの方法をより詳細に説明する記事があります: http://coding.smashingmagazine.com/2013/08/09 /absolute-horizo​​ntal-vertical-centering-css/

編集 - 絶対配置のない二次アプローチ

もう 1 つの方法は、ラッパーとテキストのそれぞれの表示プロパティとしてtableとを使用することです。table-cellそのメソッドも表示するようにフィドルを更新しました: http://jsfiddle.net/grammar/NgrWg/1/。

このtable-cellトリックを説明する別の記事では、垂直方向に中央揃えするための 3 番目の手法についても概説しています: http://css-tricks.com/centering-in-the-unknown/

于 2013-09-27T15:06:24.793 に答える