当前位置： 首页 > Web前端 > CSS

css

时间：2023-03-31 13:42:52 CSS

的居中布局问题经常使用css来处理居中问题，不同的情况使用不同的方法；一：水平居中（1）文本、图片等内联元素水平居中为父元素设置text-align:center，可以实现文本、图片等内联元素水平居中你好世界！

(2)决定宽度的块级元素决定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto来实现的。<样式>.wrapper{width:500px;高度：100px；背景：#ccc；}.inner{width：200px；高度：50px；margin-left：auto；margin-right：auto；background：#f00；}helloworld!
(3)实现宽度不确定的块级元素水平居中的三种方式，以分页模块为例，因为分页数量是不确定的，不能通过设置宽度来限制它的灵活性。方法一
  • 1
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 4
  • 5
    • 该方法演示分页有页码，三页码，五页码宽度值无法确定。这里使用了一个table标签来帮助实现不确定宽度的块级元素的水平居中。表格本身不是块级元素。如果不给它设置宽度，它的宽度会由内部元素的宽度来支持，即使不设置它的宽度，也只设置margin-left:auto和margin-right:auto来实现水平居中，在table标签中包含ul，为表格设置margin-left:auto和margin-right:auto，间接实现水平居中是什么ul。方法二
  • 1
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 4
  • 5
    • 该方法改变块级元素li的显示方式，显示为内联，然后使用text-align:center实现居中方法的优点是不需要添加太多的语义标签。缺点是块级元素设置为内联元素后，缺少一些特性，无法设置宽度。方法三
  • 1
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 4
  • 5
    • 该方法通过设置父元素的position:relative和left:50%，设置position:relative和left:-50%来设置对于子元素这种水平居中的方式可以保留块级元素的display:block属性，无需添加语义标签。缺点是设置position:relative会增加一些副作用。垂直居中1文本、图片、父元素高度不确定的块级元素垂直居中你好世界文字、图片、块级垂直居中父元素高度不确定的元素这是通过为父容器设置相同的顶部和底部填充来实现的。2由父元素高度决定的单行文字垂直居中你好
    你好
    你好
    你好
    方法二对于支持display:table-cell的IE8和Firefox，使用display:table-cell和垂直对齐：居中。对不受支持的IE6和IE7使用特定的hack。使用黑客技术区别对待Firefox、IE8、IE7和IE6。在不支持display:table-cell的IE6和IE7下，分别为父子元素设置top:50%和top:-50%实现居中。你好世界！
    你好世界！
    你好世界！内容选自《编写高质量代码-web前端开发修炼之道》

    css相关文章
    最新推荐
    猜你喜欢

    Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

    重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。