一、水平居中:

(1). 行内元素的水平居中?

如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline-block,使子元素变成行内元素

<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
<style>
.parent{text-align: center;}
.child{display: inline-block;}
</style>

(2)块状元素的水平居中(定宽)

当被设置元素为定宽块级元素时用 text-align:center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。

<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
        .child{
width: 200px;
margin: 0 auto;
}

(3)块状元素的水平居中(不定定宽)

在实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。

可以直接给不定宽的块级元素设置text-align:center来实现,也可以给父元素加text-align:center 来实现居中效果。

当不定宽块级元素的宽度不要占一行时,可以设置display 为 inline 类型或inline-block(设置为 行内元素 显示或行内块元素)

<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:;padding:;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

二、垂直居中:

和水平居中一样,这里要讲垂直居中,首先设定两个条件即父元素是盒子容器高度已经设定

场景1:子元素是行内元素,高度是由其内容撑开的

这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中

<div class="wrap line-height">
<span class="span">111111</span>
</div>
 .wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}

场景2:子元素是块级元素但是子元素高度没有设定,在这种情况下实际上是不知道子元素的高度的,无法通过计算得到padding或margin来调整,但是还是存在一些解法。

通过给父元素设定display:table-cell;vertical-align:middle来解决

<div class="wrap">
<div class="non-height ">11111</div>
</div>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
    display: table-cell;
    vertical-align: middle;
}
.non-height{
background: green;
}

结果

场景3:子元素是块级元素且高度已经设定

计算子元素的margin-top或margin-bottom,计算方法为父(元素高度-子元素高度)/2

<div class="wrap ">
<div class="div1">111111</div>
</div>
  .wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
}
.div1{
width:100px ;
height: 100px;
margin-top: 100px;
background: darkblue;
}

结果

三、水平垂直居中:

3.1水平对齐+行高

text-align + line-height实现单行文本水平垂直居中

<style>
.test{
text-align: center;
line-height: 100px;
}
</style>
<div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>  

3.2水平+垂直对齐

1. text-align + vertical-align  在父元素设置text-alignvertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素

<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
</style>
<div class="parent" style="background-color: gray; width:200px; height:100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

2.若子元素是图像,可不使用table-cell,而是其父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle

<div class="parent" style="background-color: gray; width:200px; ">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>
<style>
.parent{
text-align: center;
line-height: 100px;
font-size:;
}
.child{
vertical-align: middle;
}
</style>

3.3相对+绝对定位

使用absolute,利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto

<style>
.parent{
position: relative;
}
.child{
position: absolute;
top:;
left:;
right:;
bottom:;
height: 50px;
width: 80px;
margin: auto;
}
</style>
<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

CSS布局(六) 对齐方式的更多相关文章

  1. CSS布局之——对齐方式

    一.水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本.图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  4. CSS 布局 - 水平 & 垂直对齐

    CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...

  5. css 布局方式

    布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布 ...

  6. CSS:CSS 布局 - 水平 & 垂直对齐

    ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...

  7. css两端对齐——div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  8. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...

  9. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

随机推荐

  1. 两层嵌套list,选取list中最长的list的长度

    # coding=utf-8 import pandas as pd file_path = "test_aa.xlsx" dt = pd.read_excel(file_path ...

  2. MyEclipse中设置注释模板的方法

    1.选择菜单Window→Preferences. 2.选择Java→Code style→Code Templates→Commets.选中具体的分类如Methods,点击右侧的Edit可以设置对应 ...

  3. CentOS修改Tomcat端口号

    Linux下修改Tomcat默认端口 1.方法一 假设tomcat所在目录为/usr/local/apache-tomcat/ 1.打开tomcat配置文件 # vi /usr/local/apach ...

  4. __call PHP伪重载方法

    为了避免当调用的方法不存在时产生错误,可以使用 __call() 方法来避免.该方法在调用的方法不存在时会自动调用,程序仍会继续执行下去 该方法有两个参数,第一个参数 $function_name 会 ...

  5. 机器学习--kNN算法识别手写字母

    本文主要是用kNN算法对字母图片进行特征提取,分类识别.内容如下: kNN算法及相关Python模块介绍 对字母图片进行特征提取 kNN算法实现 kNN算法分析 一.kNN算法介绍 K近邻(kNN,k ...

  6. 汉诺塔python3函数编写和过程分析

    !/usr/bin/env python3 -- coding: utf-8 -- 利用递归函数计算阶乘 N! = 1 * 2 * 3 * ... * N def fact(n): if n == 1 ...

  7. 【转】Vim使用笔记

    http://www.cnblogs.com/jiqingwu/archive/2012/06/14/vim_notes.html 曾经使用了两年多的Vim,手册也翻过一遍.虽然现在不怎么用vim了, ...

  8. makefile编写--引用

    1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...

  9. linux shell 中的 2>&1 用法说明

    linux中有三种标准输入输出,分别是 STDIN,STDOUT,STDERR,对应的数字是 0,1,2. STDIN 是标准输入,默认从键盘读取信息: STDOUT 是标准输出,默认将输出结果输出至 ...

  10. java配置context.xml文件

    2018-02-08   23:32:23 修改context.xml文件 自从学习了servlet后,每次修改里面的内容后,想要访问都要重启服务器,这样感觉很麻烦的,所以今天就教大家一个方法,只需要 ...