css两种垂直居中对齐解决方案

栏目: CSS · 发布时间: 5年前

内容简介:利用下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子):第一种方法结束。

第一种垂直居中方法

利用 vertical-align:middle 进行垂直方向上的居中对齐,此方法需要满足的条件:

  1. 设置父元素的行高 line-height 等于父元素 height 的高度
  2. 子元素必须是行内块级元素 display:inline-block;
  3. 子元素设置 vertical-align:middle
  4. 此方法在开发中不能右浮动(不能靠右边)

下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子):

<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>

<style>

*{
    margin:0;
    padding:0;
}

.div1{
  height:200px;
  background:yellow;
  /*行高等于容器高度*/
  line-height:200px;
}

.div2{
    width:100px;
    height:100px;    
    background:green;
    /*行内块级元素*/
    display:inline-block;
    /*中线和父元素基线上方出对其,参考字母"x"*/
    vertical-align:middle;
}

.div3{
    width:100px;
    height:100px;    
    background:red;
    display:inline-block;
}
    
</style>
<body>

<div class="div1">
xxxxxxxxxxx
    <div class="div2" >
    </div>
    <div class="div3" >
    
    </div>
</div>

</body>
</html>

第一种方法结束。

第二种垂直居中方法

这种方法比较暴力,利用定位解决:

right:0px;

下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子):

<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>

<style>

*{
    margin:0;
    padding:0;
}

.div1{
  height:200px;
  background:yellow;
  /*相对定位开启*/
  position:relative;
}

.div2{
    width:100px;
    height:100px;    
    background:green;
    /*绝对定位*/
    position:absolute;
    /*可以右对齐*/
    right:0px;
    /*先向下移动父元素的50%,此时子元素的顶部与父元素的中线对齐了*/
    top:50%;
    /*再向上移动自身高度"height"的一半,此时子元素的中线和父元素的中线对齐了*/
    margin-top:-50px
}

    
</style>
<body>

<div class="div1">
    <div class="div2" >
    </div>
</div>

</body>
</html>

第二种方法结束。

总结

上面两种方法的特点都是让子元素的中线和父元素的中线对齐。


以上所述就是小编给大家介绍的《css两种垂直居中对齐解决方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数字民主的迷思

数字民主的迷思

[美] 马修·辛德曼 / 唐杰 / 中国政法大学出版社 / 2015-12-25 / CNY 39.00

马修·辛德曼著的《数字民主的迷思》主要讨论互联网对美国政治的影响,聚焦的是“民主化”这一课题。针对公众关于网络民主的美好想象与过分狂热,它通过对在线竞选、链接结构、流量模式、搜索引擎使用、博客与博主、内容生产的“规模经济”等主题的深入处理,借助大量数据图表与分析,勾勒出互联网政治的种种局限性。尤其表明,网络政治信息仍然为一小群精英与机构所创造和过滤,在网络的每一个层次和领域都仍然遵循着“赢家通吃”......一起来看看 《数字民主的迷思》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具