web-dev-qa-db-ja.com

インラインブロックdiv内のスパンテキストを垂直方向に整列

フラットなデザインのウェブサイトを構築しています。ヘッダーがあり、その下に2つの異なる色のブロックが隣り合っています。左右にフロートしてみましたが、代わりにdisplay：inline-blockを使用することをお勧めしました。

しかし、私は問題に遭遇しました。左右のブロックの真ん中にテキストを配置して、align-items：centerを使用しようとしましたが、divがflexに設定されている場合にのみ機能することがわかりました。

だから私の質問は、どういうわけか私のインラインブロックを維持し、私のテキストを私のブロックの中央（水平と垂直の両方）に配置することができますか？

    body {
      margin: 80px 0 0;
    }
    #pagewrapper {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 80px;
      background-color: #008B8B;
      position: fixed;
      top: 0;
    }
    .content-left,
    .content-right {
      width: 50%;
      height: 500px;
      color: #FFFFFF;
      display: -moz-inline-stack;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .content-left {
      background-color: #66CC99;
    }
    .content-right {
      background-color: #20B2AA;
    }
    #header-bot {
      height: 800px;
      background-color: #F8F8FF;
    }
    #footer {
      height: 50px;
      background-color: #AFEEEE;
    }
    .title {
      font-size: 18px;
    }
<body>
  <div id="pagewrapper">
    <div id="header">
    </div>
    <!-- End of Header -->
    <div class="content-left">
      <span class="title">This is left Content</span>
    </div>
    <!-- End of Content Left -->
    <div class="content-right">
      <span class="title">This is Right Content</span>
    </div>
    <!-- End of Content Right -->
    <div id="header-bot">
    </div>
    <!-- End of Header-Bot -->
    <div id="footer">
    </div>
    <!-- End of Footer -->
  </div>
  <!-- End of PageWrapper -->

</body>
htmlalignmentvertical-alignmentcss
9
Jesper Andersen

列の表示タイプをtable-cellに変更すると、問題が発生する可能性があります（たとえば、テーブルセル要素のrelative配置の効果は定義されていません）。別のオプションは、フルハイト（疑似）要素をに追加することです。列を配置し、それと<span>要素をvertical-align: middle;宣言によって垂直に配置します。

ここに例

.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */

.content-left:after, .content-right:after {
    content: "";
    display: inline-block;
    vertical-align: middle;  /* Align inline level elements vertically */
    height: 100%;
} 

.title {
    vertical-align: middle;  /* Align inline level elements vertically */
}

詳細については、ここで私の答えを参照できます。

13
Hashem Qolami

.content-leftおよび.content-rightdivで、表示をテーブルに変更し、中央のテキスト配置を追加します。 .titleスパンの場合、表示をtable-cellに変更し、中央の垂直方向の配置を追加します。

.content-left, .content-right {
    display: table;
    text-align: center;
}
.title {
    display: table-cell;
    vertical-align: middle;
}

これが jsfiddle のデモンストレーションです（divを200pxの高さに変更したので、小さいjsfiddleウィンドウでセンタリング効果を確認しやすくなりました）

2
kinakuta