温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML中元素居中要注意哪些事项

发布时间:2022-03-15 16:24:45 来源:亿速云 阅读:152 作者:iii 栏目:web开发

这篇文章主要讲解了“HTML中元素居中要注意哪些事项”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML中元素居中要注意哪些事项”吧!

  不使用定位

  水平居中:text-align=center;(可继承)

  竖直居中:margin:0auto;(块级元素)

  其他居中:

      1.文字居中:父元素设置高子元素设置高line-height=height(父元素)

  2.图片居中:vertical-aign:middle;<--必须放在图片元素中

  .first{

  width:300px;

  height:100px;

  background-color:black;

  color:white;

  text-align:center;

  margin:0auto;//针对块级元素

  }

  <divclass="first">

  不使用定位(1)

  </div>

  .second{

  width:300px;

  height:100px;

  background-color:green;

  }

  .s_child{

  width:150px;

  line-height:100px;

  }

  <divclass="second">

  <divclass="s_child">

  不使用定位(2)

  </div>

  </div>

  2.定位居中

  a.父元素高度固定

  父元素:相对定位

  子元素:绝对定位

  top:50%(父元素高度的一半)

  left:50%

  margin-top:自己的高度一半;(加负号)

  margin-left:自己宽度的一半;(加负号)

  .dw_one{

  width:600px;

  height:300px;

  position:absolute;

  background:black;

  }

  .dw_one_child{

  background:white;

  position:relative;

  width:50px;

  height:50px;

  top:50%;

  left:50%;

  margin-top:-25px;

  margin-left:-25px;

  }

  <divclass="dw_one">

  <divclass="dw_one_child">

  a

  </div>

  </div>

  b.父元素高度不固定

  .wrapper{

  width:600px;

  height:600px;

  }

  .dw_two{

  width:100%;

  height:100%;

  position:absolute;

  background:black;

  }

  .dw_two_child{

  background:white;

  position:relative;

  top:50%;

  left:50%;

  width:100px;

  height:100px;

  transform:translate(-50%,-50%);

  -moz-transform:translate(-50%,-50%);

  -ms-transform:translate(-50%,-50%);

  -o-transform:translate(-50%,-50%);

  -webkit-transform:translate(-50%,-50%);

  }

  <divclass="wrapper">

  <divclass="dw_two">

  <divclass="dw_two_child">

  a

  </div>

  </div>

  </div>

  3.关于多行文本的居中

  使用display:table;display:table-cell;

  vertical-align:middle;居中

  #outer{

  width:200px;

  height:200px;

  background:#cccccc;

  display:table;

  _position:relative;//"_"为了兼容IE6

  }

  #inner{

  display:table-cell;

  vertical-align:middle;

  _position:absolute;

  _top:50%;

  }

  #content{

  _position:relative;

  _top:-50%;

  }

  <divid="outer">

  <divid="inner">

  <divid="content">

  </div>

  </div>

  </div>

感谢各位的阅读,以上就是“HTML中元素居中要注意哪些事项”的内容了,经过本文的学习后,相信大家对HTML中元素居中要注意哪些事项这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI