宜推网络拥有7年的网络营销策划实操经验,可为企业提供网络推广外包,全网整合营销,做网络广告推广找我们靠谱!

宜推网络是企业广告策划的好伙伴

找网站推广公司做广告就找干活靠谱的

提供一站式网络营销外包,全网整合营销服务

150-2159-0351

为企业创造价值,我们懂技术,更懂营销

找网站营销公司合作网络推广就选用心干活的!

您现在的位置:上海网站营销 > 网络营销技巧 > 上海网站优化 >

上海网络公司常见的水平居中布局方式

人气: 发表时间:2017-09-25 17:57 内容来源:未知

导读:
在页面布局时,常常需要把某些元素水平居中放置,下面大连网络公司总结几种令元素水平居中的方法。 1、text-align:center 如果子元素是行内元素,那么可以设置其父元素的text-align:[...]
在页面布局时,常常需要把某些元素水平居中放置,下面大连网络公司总结几种令元素水平居中的方法。
 
1、text-align:center
 
如果子元素是行内元素,那么可以设置其父元素的text-align:center,这样元素就能实现水平居中了。但是对于块元素此方法则行不通了。
 
2、margin:0 auto
 
如果元素属于块元素,可以设置元素的margin样式--margin:0 auto。但是仅仅设置margin还不行,必须设置其width长度;如果width设置为100%,元素则不能水平居中。
 
3、flex弹性布局
 
flex是CSS3新添加的一个属性,在子元素的宽度已知的情况之下,可以设置如下:
 
flex弹性布局
 
虽然flex简单快捷、代码量少,可以解决布局方面的很多棘手的问题,但是它的兼容性不是很好。
 
4、绝对定位position
 
使用绝对定位的方式也能实现水平居中,设置如下:
 
绝对定位position
 
虽然使用position可以实现水平居中,但是当浏览器窗口大小变化时,其可能会出现其他的问题,大连网络公司譬如:元素挤满了某一行,导致元素的排列顺序零乱。