質問: cssでテキストを縦方向に中央揃えする方法 テキストを含むdiv要素があり、このdivの内容を垂直方向の中央に揃えます。これが私のdivスタイルです。 #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #fff; text-align: center; } <div id="box"> lorem ipsum dolor sit </div> これを行うための最良の方法は何ですか?
回答: 柔軟なアプローチ div { width: 250px; min-height: 50px; line-height: 50px; text-align: center; border: 1px solid #123456; margin-bottom: 5px; } span { display: inline-block; vertical-align: middle; line-height: normal; } <div> <span>lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div> <span>lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div> <span>lorem ipsum dolor sit amet.</span> </div> <div>