189 8069 5689

css怎样实现水平居中

这篇文章主要介绍了css怎样实现水平居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司主打移动网站、成都网站设计、成都网站建设、网站改版、网络推广、网站维护、主机域名、等互联网信息服务,为各行业提供服务。在技术实力的保障下,我们为客户承诺稳定,放心的服务,根据网站的内容与功能再决定采用什么样的设计。最后,要实现符合网站需求的内容、功能与设计,我们还会规划稳定安全的技术方案做保障。

假设现在给出这种场景:


  
    DEMO
  

其中在 class='child' 这个 div 中的内容长度是不一定的,现在需要实现这个 div 的居中。

水平居中

1 display: inline-block

在块级父容器中让行内元素或者类行内元素居中,只需使用 text-align: center,
这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。

.child {
  display:inline-block;
  /*子元素文字会继承居中,因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

当有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙,这不是什么 bug ,特性就是如此。。

如果想去掉这些缝隙的话,有几种解决方法:

1.去掉 HTML 中的空格。

元素之间留白间距出现的原因是因为标签段之间的空隙,这个时候只需要去除掉 HTML 之间的空隙就好了。

比如这种写法,当然写法也有很多种,只要保证把空隙去掉就可以了,但是这种方法总觉得写起来有点反人类。


  
  DEMO1
  DEMO2   DEMO3

2.使用 margin 负值

这种方法这个负的值不太好确定,和上下文的字体等等都有关,这种方法不太适合大规模的使用。

.child {
  margin-right; -5px;
}

3.使用 font-size: 0

这种方法能十分简单地这个间距问题,只需要将父 div 的 font-size 设为0 ,然后记得将子 div 的 font-size 属性设置回来即可。

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

4.使用 letter-spacing 或者 word-spacing

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

2 display:table

table 元素的宽度也是跟着内容走,居中的时候加上 margin 即可。兼容IE8。

如果不设置成table,设置成别的块级元素也可以,但是要强调设置宽度width,不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好,如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)

.child {
  display:table;
  margin:0 auto;
}

3 position: absolute

absolute 元素的宽度默认也是由内容决定

这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流

.parent {
  position:relative;
}
.child{
  position:absolute; /*参照物是父容器*/
  left:50%;
  transform:translateX(-50%); /*百分比的参照物是自身*/

4 dispaly: flex

只兼容IE10+

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin:0 auto;
}

感谢你能够认真阅读完这篇文章,希望小编分享的“css怎样实现水平居中”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享名称:css怎样实现水平居中
URL网址:http://cdxtjz.cn/article/joehih.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。