在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐

  

  可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现。

  这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用。

  以前遇到这种场景,其实挺头疼的,我是直接给小图标设置相对定位,然后调整top值。好像找不到更好的办法,也就没去管了。

  直到后来偶然看了张鑫旭大神关于vertical-align属性的视频讲解,感觉发现了新大陆。

  

  下面总结了2种方法,只需要一句代码即可解决(强烈推荐第二种)

  ①:给小图标加上 vertical-align:middle;

  以前因为IE6,7对该属性不支持,所以还要使用csshack,

  现在主流浏览器都已经很好的支持了,而且谁还管万恶的低版本IE浏览器兼容喔(eat shift)

  

  ②:给小图标加上 vertical-align:-2px;(这里的负值根据你的情况自行设置,这种方法没有兼容性问题)

  注:如果当你遇到第一种方法用了没有效果或者用着很不开心的时候,强烈推荐使用第二种方法

  

  顺便总结了一些其它小技巧,害怕自己以后忘记,也希望帮到有需要的小伙伴

  问题1:怎么让定位元素垂直居中的三种方法?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div01 {
width:200px;
height:200px;
background-color:#6699FF;
position:absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div01"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div01 {
width:200px;
height:200px;
background-color:#6699FF;
position:absolute;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="div01"></div>
</body>
</html>

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位元素居中</title>
<script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
.div{
width: 500px;
height: 300px;
background-color: red;
position: absolute;
left: 50%;
top:50%;
margin: -150px 0px 0px -250px;
}
</style>
<body>
<div class="div"></div>
</body>
</html>

  注: 上面三种都是在知道具体宽高的情况下,如果不知道元素宽高怎么让其垂直居中呢?(利用transform属性)

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style> <body>
<img src="img/1.jpg" />
</body> </html>

  问题2:怎么让文字垂直居中?

  (给一个空标签,然后给空标签设置display:inline-block;height:100%;width:1px;vertical-align:middle;)

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>文字垂直居中</title>
<style type="text/css">
.test {
width: 500px;
padding: 10px;
border: 1px solid red;
text-align: center;
} .test div {
display: inline-block;
padding: 3px;
width: 200px;
border: 1px solid #CCCCCC;
} .test span {
display: inline-block;
height: 100%;
width: 1px;
vertical-align: middle;
}
</style>
</head> <body>
<!--用一个高度100% 宽1px display: inline-block 的空标签 然后使用vertical-align: middle; 就可以在高度不固定的情况下 自动居中--> <div class="test">
<div>
青青园中葵,朝露待日晞。 阳春布德泽,万物生光辉。 常恐秋节至,焜黄华叶衰。 百川东到海,何时复西归? 少壮不努力,老大徒伤悲。青青园中葵,朝露待日晞。 阳春布德泽,万物生光辉。 常恐秋节至,焜黄华叶衰。 百川东到海,何时复西归? 少壮不努力,老大徒伤悲。
</div>
<span></span>
</div> </body> </html>

  问题3:怎么让一个块元素水平居中,块元素里的文字也水平居中?

  给这个块元素设置一个固定宽度,然后加上margin:0 auto; 在给里面的元素设置text-align:center;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 400px;
margin: 0 auto;
background-color: chocolate;
}
.main p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<p>珍爱生命,远离IE</p>
</div>
</body>
</html>

  补充:最简单的实现左边定宽,右边自适应布局(给左边设置固定宽度,然后加浮动;右边设置宽度百分百,不加浮动)

  

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
color: #fff;
font-size: 30px;
font-weight: bold;
text-align: center;
box-sizing: border-box;
} aside {
float: left;
width: 200px;
height: 200px;
line-height: 200px;
background: #5A6A94;
} section {
width: 100%;
height: 200px;
line-height: 200px;
background: #BE4F4F;
}
</style>
</head> <body>
<!-- 左边定宽 -->
<aside class="left">Left</aside>
<!-- 右边自适应 -->
<section class="right">Right</section>
</body> </html>

  

css垂直居中方法总结的更多相关文章

  1. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  2. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  3. css垂直居中方法(四)

    第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...

  4. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  5. css 垂直居中方法汇总

    查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...

  6. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  7. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  8. css垂直居中方法(二)

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

  9. css垂直居中方法(一)

    第一种方法:首先用margin:0 auto实现水平居中,然后设置position:relative,设置top为50%(父元素高度的50%),然后设置margin-top:-150px(设置负值是因 ...

随机推荐

  1. Spring Boot 整合Spring Security 和Swagger2 遇到的问题小结

    How to configure Spring Security to allow Swagger URL to be accessed without authentication @Configu ...

  2. tkinter中spinbox递增和递减控件(十)

    spinbox递增和递减控件 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("3 ...

  3. datetime日期和时间

    datetime是Python处理日期和时间的标准库. from datetime import datetime # 获取当前时间 now = datetime.now() print(now) # ...

  4. HTML基础篇(标签和属性整--已剔除不被浏览器支持的部分)

    行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...

  5. Volley 图片加载相关源码解析

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47721631: 本文出自:[张鸿洋的博客] 一 概述 最近在完善图片加载方面的 ...

  6. python爬取网易云周杰伦所有专辑,歌曲,评论,并完成可视化分析

    ---恢复内容开始--- 去年在网络上有一篇文章特别有名:我分析42万字的歌词,为搞清楚民谣歌手们在唱些什么.这篇文章的作者是我大学的室友,随后网络上出现了各种以为爬取了XXX,发现了XXX为名的文章 ...

  7. vs插件-基于TFS的源码记录可视化

    插件地址:https://marketplace.visualstudio.com/items?itemName=AlexandrBiryukov.TFSSourceControlHistoryVis ...

  8. ssh 隧道

    SSH 隧道转发实战   大家都知道SSH是一种安全的传输协议,用在连接服务器上比较多.不过其实除了这个功能,它的隧道转发功能更是吸引人.下面是个人根据自己的需求以及在网上查找的资料配合自己的实际操作 ...

  9. 命令提示符编译java

    先新建一个文件夹kun,kun就是类所在的package.新建一个java文件. HelloWorld.java的代码如下: package kun; public class HelloWorld{ ...

  10. ASP.NET Core的实时库: SignalR简介及使用

    大纲 本系列会分为2-3篇文章. 第一篇介绍了SignalR的预备知识和原理 本文介绍SignalR以及ASP.NET Core里使用SignalR. 本文的内容: 介绍SignalR 在ASP.NE ...