CSS複数行のテキストを垂直に中央に配置する方法
882 ワード
単行テキストを中央に配置するのは簡単です.line-heightをheightと同じに設定すればいいです.複数行のテキストでは、widthを使用して、heightはpx単位を使用しなければなりません.vertial-align:middleとdisplay:table-cell属性を組み合わせると実現できます.
単行テキストを中央に置くのは簡単ですが、line-heightをheightと同じように設定すればいいのですが、複数行のテキストでは、この方法は通用しません.最初の行を除いて、次の行は見えません.
複数行のテキストが垂直方向に中央にあるCSSは、次のように設定する必要があります.
このdivがフローティングしなければならない場合は、中にdivをもう1つネストすることができます.この方法にはwidthとheightが固定されなければならないという問題がある.そうしないと、中央を実現できない. 親divはdisplay:tableのプロパティをもう1つ設定します.この方法にはもう一つの問題があります.overflow属性が機能しなくなったことです.これはdivをtable-cellに設定した結果です.overflow:hiddenを実現するには、overflow:hiddenの属性を個別に設定するdivを設定する必要があります.
以上が本節のcssチュートリアルのすべての内容で、皆さんに役に立つことを望んでいます.
単行テキストを中央に置くのは簡単ですが、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チュートリアルのすべての内容で、皆さんに役に立つことを望んでいます.