CSS複数行のテキストを垂直に中央に配置する方法

882 ワード

単行テキストを中央に配置するのは簡単です.line-heightをheightと同じに設定すればいいです.複数行のテキストでは、widthを使用して、heightはpx単位を使用しなければなりません.vertial-align:middleとdisplay:table-cell属性を組み合わせると実現できます.
 単行テキストを中央に置くのは簡単ですが、line-heightをheightと同じように設定すればいいのですが、複数行のテキストでは、この方法は通用しません.最初の行を除いて、次の行は見えません. 
複数行のテキストが垂直方向に中央にあるCSSは、次のように設定する必要があります. 
/*         ,width,height    px  ,   vertial-align:middle display:table-cell  , div    */ 
.vcenter 
{ // www.jbxue.com
width: 100px; height: 102px; vertical-align: middle; display: table-cell; overflow: hidden; 
}

このdivがフローティングしなければならない場合は、中にdivをもう1つネストすることができます.この方法にはwidthとheightが固定されなければならないという問題がある.そうしないと、中央を実現できない.  親divはdisplay:tableのプロパティをもう1つ設定します.この方法にはもう一つの問題があります.overflow属性が機能しなくなったことです.これはdivをtable-cellに設定した結果です.overflow:hiddenを実現するには、overflow:hiddenの属性を個別に設定するdivを設定する必要があります.
以上が本節のcssチュートリアルのすべての内容で、皆さんに役に立つことを望んでいます.