안녕하세요 여러분, 오늘은 모달 상자를 작성할 때 내용을 세로 및 가로로 가운데에 배치하는 방법에 대해 먼저 알아보겠습니다.
이 문제는 실제로 모달 상자를 가운데에 배치하는 방법과 동일합니다. div는 수직 및 수평 중앙에 있습니다. 그렇다면 이 문제를 어떻게 해결합니까? 5가지 솔루션이 있습니다.
먼저 첫 번째 경우 div1의 너비와 높이를 알 때:
<div id="div1"></div #div1{
<span style="font-size: 18px"> width: 200px;</span><br/><span style="font-size: 18px"> height: 100px;</span><br/><span style="font-size: 18px"> background: #54fa45;</span><br/><span style="font-size: 18px"> position: absolute;</span><br/><span style="font-size: 18px"> left:50%;</span><br/><span style="font-size: 18px"> top:50%;</span><br/><span style="font-size: 18px"> margin-left:-100px; //设置div1的左边距为宽度的一半</span><br/><span style="font-size: 18px"> margin-top:-50px; //设置div1的上边距为高度的一半</span><br/><span style="font-size: 18px"> }<br/> 第二种情况下:不知道div1的宽高,就好比设置图片的垂直水平居中:<br/></span>
<span style="font-size: 18px"> img{</span><br/><span style="font-size: 18px"> position: absolute;</span><br/><span style="font-size: 18px"> left: 0;</span><br/><span style="font-size: 18px"> top: 0;</span><br/><span style="font-size: 18px"> right: 0;</span><br/><span style="font-size: 18px"> bottom: 0;</span><br/><span style="font-size: 18px"> margin: auto;</span><br/><span style="font-size: 18px"> }</span>
<span style="font-size: 18px"> 这种情况其实很简单,给图片一个绝对定位,然后上下左右都为0,最后margin:auto;<br/> 第三种情况:利用display:table<br/></span>
<span style="font-size: 18px"> html,body{</span><br/><span style="font-size: 18px"> height: 100%;</span><br/><span style="font-size: 18px"> overflow:hidden;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> #box{</span><br/><span style="font-size: 18px"> width:100%;</span><br/><span style="font-size: 18px"> height:100%;</span><br/><span style="font-size: 18px"> background: #dbffd8;</span><br/><span style="font-size: 18px"> display:table;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> #div1{</span><br/><span style="font-size: 18px"> height:100%;</span><br/><span style="font-size: 18px"> width:100%;</span><br/><span style="font-size: 18px"> display:table-cell;</span><br/><span style="font-size: 18px"> text-align:center;</span><br/><span style="font-size: 18px"> vertical-align:middle;</span><br/><span style="font-size: 18px"> }<br/> 第四种情况:利用display:</span><span style="font-size: 18px"><em style="line-height: 1.5">table-cell;<br/></em></span>
<span style="font-size: 18px"> html,body{</span><br/><span style="font-size: 18px"> height: 100%;</span><br/><span style="font-size: 18px"> overflow:hidden;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> #box{</span><br/><span style="font-size: 18px"> width:100%;</span><br/><span style="font-size: 18px"> height:100%;</span><br/><span style="font-size: 18px"> background: #dbffd8;</span><br/><span style="font-size: 18px"> display:table;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> #div1{</span><br/><span style="font-size: 18px"> height:100%;</span><br/><span style="font-size: 18px"> width:100%;</span><br/><span style="font-size: 18px"> <span style="color: #ccffff"> <span style="color: #000000">display:table-cell;</span></span></span><br/><span style="font-size: 18px; color: #000000"> text-align:center;</span><br/><span style="font-size: 18px; color: #000000"> vertical-align:middle;</span><br/><span style="font-size: 18px"> }<br/> 最后一种就是利用盒子的怪异盒模型了<br/></span>
<span style="font-size: 18px"> <div id="box"><br><span style="font-size: 18px"> <img src="img/map-pin.png" alt=""></span><br><span style="font-size: 18px"> </div><br></span>
<span style="font-size: 18px"> html,body{</span><br><span style="font-size: 18px"> height: 100%;</span><br><span style="font-size: 18px"> overflow:hidden;</span><br><span style="font-size: 18px"> }</span><br><span style="font-size: 18px"> #box{</span><br><span style="font-size: 18px"> width:100%;</span><br><span style="font-size: 18px"> height:100%;</span><br><span style="font-size: 18px"> display:-webkit-box;</span><br><span style="font-size: 18px"> -webkit-box-align:center;</span><br><span style="font-size: 18px"> -webkit-box-pack:center;</span><br><span style="font-size: 18px"> }<br>这就是我对元素水平居中的理解,你们学会了吗?</span>
위 내용은 모달 상자를 작성할 때 내용을 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!