文档章节

CSS整理(3)之让元素水平居中和垂直居中方法

IrisHuang
 IrisHuang
发布于 2016/03/29 21:33
字数 914
阅读 59
收藏 2

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结:

实现水平居中:

对于行内元素来说,直接对要设置的元素设置text-align:center属性就行了,代码如下:

 span{text-align:center;}

而对于块状元素来说,分为元素定宽和不定宽两种情况:

当元素定宽时:左右margin值设为auto或将右margin值设为auto;如

<style type="text/css">
    #nihao{
        width: 500px;
        margin: 20px auto;//也可以是margin:auto;
        border: 2px solid red;
        background-color: olive
    }
    </style>
<body>
<div id="nihao">nb</div>
</body>

当块状元素不定宽度时,要实现水平居中,有如下方法:

1,加入table 标签;table 本身不是块级元素,如果不给它设定宽度的话,会由内部元素的宽度“撑开”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。这种方法的缺点是加入了无语义标签;代码如下:

<style type="text/css">
table{margin-left:auto;margin-right:auto;}
.yanshi li{float:left;margin-right:5px;>
 </style>
</head>
<body>
<table>
    <tbody>
        <tr>
        <td>
             <ul class="yanshi">
             <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             </ul> 
         </td>
         </tr>
     </tbody>
</table>

2 、设置display:inline;即把元素设置为行内元素,采用text-align:center属性值来将元素水平居中;但这种 方法将元素设为行内元素,就丢失了块状元素的特点,比如就不能设置宽度和高度,可能对整个布局产生影响;代码如下:

<style type="text/css">
    .nihao{ 
        display: inline;
        background-color: olive;
        
    }
    </style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</ul>

可以看出如果要实现元素水平居中,很重要的一点是必须将父元素设置为 

text-align: center;

3,、设置给父元素设置float属性后再设置position:relative;和left:50%;,然后给子元素设置position:relative;和left:50%,实现水平居中;如:

<style type="text/css">
    .nihao{ 
        float:left;
        background-color: olive;
        position: relative;
        left: 50%;
    }
    .nihao li{
        position: relative;
        left: 50%;
    }
    </style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</body>

让元素垂直居中的方法:

1、单行文本的垂直居中:设置元素的height属性和line-height属性,如:

<style type="text/css">
    .parent{ width:800px;  margin:0 auto; border:1px solid red;}
    .parent p{border:1px dashed red; line-height:60px; margin:30px;}
    </style>
</head>
<body>
<div class="parent">
<p>bairiyishanjin</p>
</div>

2、多行文本的垂直居中:给块级元素设置:display:table-cell;激活vertical-align属性,

<style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        .nihao{
            display: table-cell;
            border:1px solid blue;
            vertical-align: middle;
            height:500px;
        }  
    </style>  
    <div class="nihao">  
        <p>你好!</p> 
    </div>

这种方法适用于各种情况,不管是容器定高还是不定高;

多行文本垂直居中还有一种方法:设置父元素的行高,将子元素inline-block化,将line-height设为normal;将基线设置为vertical-align:middle即可,代码如下:

<div style="border:1px solid red;line-height: 300px;">
        <p style="display: inline-block;line-height: normal;vertical-align: middle;text-align: left;">你好,明天</p>
    </div>

3、对于行级元素来说,可以直接设置它的:vertical-align:middle;但是此种情况仅适用于行级元素;

 

 

设置图片垂直居中显示的做法
1.当图片直接作为背景图片时:设置背景的高度,宽度可以不设置,设置background-position:center;这种相对简单;
2.设置div的height和img图片一致,设置父div的text-align:center;设置img的vertical-align:middle;

3.固定图片大小的设置:display:block;margin:0 auto;

这3种方法简单高效,本人亲测。

© 著作权归作者所有

IrisHuang
粉丝 3
博文 68
码字总数 39102
作品 0
武汉
前端工程师
私信 提问
[译文]CSS的水平/垂直居中:一篇完整的指南

原文:Centering in CSS: A Complete Guide 在CSS中居中是(开发者)抱怨CSS设计的代表问题之一。有人嘲笑说:这有什么困难的呢?我认为,难度不在于解决问题,而在于有如此多的不同解决方法...

huangpin815
2017/09/26
0
0
元素水平居中和垂直居中的几种简单方法

一、如何使元素在水平方向上居中 1. 使用text-align:center。 在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。 2.在需要居...

小陈同学
2014/05/07
137
3
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
697
0
CSS实现水平垂直居中的10种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将...

颜海镜
2018/09/13
0
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
2018/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
9
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部