霍者博客

如何设置CSS里元素垂直居中效果

今天有个客户网站修改了产品分类名称,有几个特别长,明显的超出了原始设计的时候所考虑的范围了。

发现问题就搜索一下博客,竟然没有发现垂直居中的相关解决方法,但是就在前不久我又的的确确用过,所以就在这里整理一下分享给大家。

简单的说呢,就是在需要垂直居中的内容或元素的父级加上以下属性就可以了。

display:flex;align-items:center;

先看图:(左图是原有的,有图是修改过的可以垂直居中对齐。)

  

代码我就截取一点贴出来,请自行分析学习。

HTML:

<div class="zlef left">
      <h5>Products</h5>
      <ul>
        <li><a href="http://www.huozheweb.com/">Pavement Maintenance</a></li>
        <li><a href="http://www.huozheweb.com/">Ashpalt Pavement Maintenance</a></li>
        <li><a href="http://www.huozheweb.com/">Sewer Dredging and Cleaning Vehicle</a></li>
        <li><a href="http://www.huozheweb.com/">Garbage Collection</a></li>
        <li><a href="http://www.huozheweb.com/">Emergency Rescue</a></li>
        <li><a href="http://www.huozheweb.com/">Snow removal equipment</a></li>
      </ul>
  </div>

CSS:

.zlef {
padding-top: 5px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #cc0001;
}
.zlef h5 {
font-size: 14px;
line-height: 24px;
text-align: center;
color: #cc0001;
}
.zlef ul {
margin-top: 15px;
margin-bottom: 15px;
}
.zlef ul li {
line-height: 40px;
background-image: url(../images/lejt1.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color:#d2d2d2;
margin-bottom:5px;
}
.zlef ul li a {
padding-left: 30px;
display:block;height: 40px;line-height: 18px;display: flex;align-items: center;
}
.zlef ul li a:hover{
color: #FFF;
text-decoration:none;
}
.zlef ul li:hover {
background-image: url(../images/lejt.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color:#cc0001;
}

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/598.html,标题:如何设置CSS里元素垂直居中效果

【我来说两句】
分享到:

相关文章:


CSS4激动人心的新特性及浏览器支持度  (2017-3-6 7:0:0)

CSS font-weight 属性  (2017-1-25 6:8:17)

只使用CSS如何禁止选中文字,而不是JS  (2016-12-26 7:11:36)

CSS实现多行文本溢出显示省略号  (2016-12-12 5:0:22)

CSS样式表知识点回顾  (2016-4-24 8:7:20)

CSS​样式文件命名规范  (2016-4-21 9:49:45)

word-wrap&word-break的区别  (2016-4-18 11:0:26)

CSS盒子浮动 float  (2016-4-17 10:9:14)

CSS空间定位z-index空间定位  (2016-4-17 8:20:0)

CSS文字样式  (2016-4-17 8:0:48)


评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。