如何实现两个div中心对齐呢 css 或js jq都行

html-css014

如何实现两个div中心对齐呢 css 或js jq都行,第1张

你定位用对了 但是你的div1和div2 都没有对top和left定位，你可以加上.div1{position：absolutetop:0left0} .div2{position:absolutetop:25pxleft:25px}

一行文字可以通过line-height和高度相同来实现垂直中心对齐，图片的话可以给图片添加vertical-align:middle来实现，示例如下：

<style>

p{line-height:100pxhieght:100pxtext-align:center}

div{height:200pxtext-align:center}

div img{vertical-align:middlewidth:80pxheight:80px}

</style>

<p>示例文字</p>

<div><img src="图片"/></div>

如果是多行文字的话就得用到CSS的表格特性来做，示例如下：

<style>

.box { position: relative width: 200px height: 200px margin: 40px auto 0 auto background: #282d33 border: solid 1px #171717 box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.4) color: #bbb }

.box .tag { position: absolute top: -11px left: 70px width: 60px height: 20px background: #1b1b1b border: solid 1px #171717 text-align: center }

/* IE6+ 支持图片和多行文字水平垂直居中 */

.ie_imgText { display: table width: 200px height: 200px text-align: center *position: relative }

.ie_imgText .cell { vertical-align: middle display: table-cell *position: absolute *top: 50% *left: 50% }

.ie_imgText .content { *position: relative *top: -50% *left: -50% }

</style>

<div class="box">

  <div class="ie_imgText">

    <div class="cell">

      <div class="content">

        <img src="图片" alt="">

        <p>文字文字</p>

        <p>文字文字文字</p>

      </div>

    </div>

  </div>

</div>