ホームページ > 記事 > ウェブフロントエンド > display:table-cell_html/css_WEB-ITnose の使い方の紹介
display:table-cell_html/css_WEB-ITnose の使い方の紹介
- WBOYオリジナル
- 2016-06-24 11:41:321241ブラウズ
display:table-cell の使い方の紹介:
display 属性は、display:block や display:inline など、非常に頻繁に使用されますが、display:table-cell は、この属性が実行するため、馴染みがないかもしれません。は大きな役割を果たします。まず、コード例を見てみましょう。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:600px; height:600px; background-color:green; vertical-align:middle;}.children{ width:100px; height:100px; background-color:red;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 上記のコードでは、vertical-align:middle が親 div に追加されていますが、子 div はまだ垂直方向に中央揃えにすることができません。 。コードを変更しましょう:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:600px; height:600px; background-color:green; display:table-cell; vertical-align:middle;}.children{ width:100px; height:100px; background-color:red;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 上記のコードのパフォーマンスから、display:table-cell を追加すると、子 div が親 div 内で垂直方向のセンタリング効果を達成することがわかります。 IE6 および IE7 では、ブラウザの無効なバージョンです。これにより、html タグ
元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/502.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。