ホームページ >ウェブフロントエンド >htmlチュートリアル >div_html/css_WEB-ITnose の水平および垂直センタリング効果を実現する方法
div_html/css_WEB-ITnose の水平および垂直センタリング効果を実現する方法
- WBOYオリジナル
- 2016-06-24 11:41:011180ブラウズ
div の水平方向、垂直方向、中央揃えの効果を実現する方法:
場合によっては、div を親コンテナーの中央に配置する必要がある場合があります。まずコード例を見てから分析してみましょう。
コード例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:500px; height:500px; border:1px solid red; position:absolute;}.children{ width:200px; height:100px; background-color:green; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 上記のコードでは、オブジェクトの垂直方向のセンタリング効果を実現するために、position 属性が使用されています。サブオブジェクトで top:50% と left:50% を使用すると、オブジェクトの中心合わせは実現されませんが、オブジェクトの左上隅の垂直方向の中心合わせが実現されます。 図は次のとおりです。
必要なのはオブジェクトです。中心が中央に配置され、オブジェクト全体が中央に配置されます。そのため、margin:-50px 0 0 -100px を使用して、オブジェクトをそれぞれ高さの半分と幅の半分だけ上と左に移動します。
特記事項:
親オブジェクトは絶対配置を使用します。それ以外の場合、子オブジェクトの絶対配置ではウィンドウが参照オブジェクトとして使用されます。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/586.html
最も元のアドレスは次のとおりです: http://www.softwhy.com
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。