div_html/css_WEB-ITnose の水平および垂直センタリング効果を実現する方法-htmlチュートリアル-php.cn

div_html/css_WEB-ITnose の水平および垂直センタリング効果を実現する方法

WBOY

リリース： 2016-06-24 11:41:01

オリジナル

1195 人が閲覧しました

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