前端居中文本（包括垂直居中，水平居中）

最新推荐文章于 2024-04-02 14:52:40 发布

飞飞飞呀飞

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量1.7w

点赞数 4

一：居中效果实现小结

1，文本居中

文本水平居中：text-align:center;

文本垂直居中：①设置line-height=父元素的height （单行文本）；②通过设置padding-top、padding-bottom

2，盒子水平居中：

① margin:0 auto; 该盒子需设置了width，不然其width默认为:auto，此时会把值为auto的margin的值改为0

② 使用绝对定位，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位，即子绝父相

[css] view plain copy

print ?

width: 100px;
position: absolute;
left: 50%;
/* 设置负左外边距，其值为自身宽度的一半 */
margin-left: -50px;

width: 100px;
position: absolute;
left: 50%;
/* 设置负左外边距，其值为自身宽度的一半 */
margin-left: -50px;

③ 设置盒子显示为inline-block

[css] view plain copy

print ?

.parent {
text-align: center;
}
.child {
display: inline-block;
}

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

④使用绝对定位

[css] view plain copy

print ?

/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的宽度；IE9开始支持 */
transform: translate(-50%,0);

/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的宽度；IE9开始支持 */
transform: translate(-50%,0);

⑤flex布局

[css] view plain copy

print ?

.parent {
display: flex;
justify-content: center;
}

.parent {
    display: flex;
    justify-content: center;
}

3，盒子垂直居中

①通过设置display属性

[css] view plain copy

print ?

.parent {
/* 注意，使用这种方式会导致其margin失效 */
display: table-cell;
vertical-align: middle;
}

.parent {
    /* 注意，使用这种方式会导致其margin失效 */
    display: table-cell;
    vertical-align: middle;
}

②使用绝对定位，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位

[css] view plain copy

print ?

height: 100px;
position: absolute;
top: 50%;
/* 设置负上外边距，其值为自身高度的一半 */
margin-top: -50px;

height: 100px;
position: absolute;
top: 50%;
/* 设置负上外边距，其值为自身高度的一半 */
margin-top: -50px;

③使用绝对定位二

[css] view plain copy

print ?

/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自适应下实现垂直居中；IE9开始支持 */
transform: translate(0,-50%);

/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自适应下实现垂直居中；IE9开始支持 */
transform: translate(0,-50%);

④flex布局

[css] view plain copy

print ?

.parent {
display: flex;
align-items: center;
}

.parent {
    display: flex;
    align-items: center;
}

二：清除浮动小结

清除浮动：不是删除浮动，而是清除浮动的影响。

1，使用clear

clear: left | right | both | none 应用于块级元素

如：h3 {clear:left;} 确保h3元素左边没有浮动元素
clear工作原理：CSS1和CSS2中，增加元素的上外边距
CSS2.1中，在元素上外边距之上增加额外间隔（即清除区域），并不改变元素的外边距
缺点：靠近浮动元素那边的margin会失效

2，给浮动元素的祖先元素加高度
有高度的盒子才能关住浮动

缺点：直接设置height不好，高度最好让内容去自然撑高

3，隔墙法：

在两部分浮动之间加一个有高度的div，并设置其clear属性。

内墙法：

[html] view plain copy

print ?

<div>
<div class=“fl”>浮动元素</div>
<!– 在下面加一个设置clear属性的元素，这样浮动就不会对后面的元素造成影响了 –>
<div class=“cl”>这可看作是一道内墙</div>
</div>

<div>
    <div class="fl">浮动元素</div>
    <!-- 在下面加一个设置clear属性的元素，这样浮动就不会对后面的元素造成影响了 -->
    <div class="cl">这可看作是一道内墙</div>
</div>

4，偏方：设置overflow:hidden;（慎用，原因见下文）

5,使用伪元素，推荐使用这种方法

[css] view plain copy

print ?

/* 使用伪元素:after清除浮动 #版本一# */
.clearfix:after{
visibility:hidden;
display:block;
clear:both;
content:“”;
font-size:0;
height:0
}
/* 下面是用来解决ie6，7浮动问题 */
.clearfix{*zoom:1};

/* 使用伪元素:after清除浮动  #版本一# */
.clearfix:after{
        visibility:hidden;
        display:block;
        clear:both;
        content:"";
        font-size:0;
        height:0
}
/* 下面是用来解决ie6，7浮动问题 */
.clearfix{*zoom:1};

[css] view plain copy

print ?

/* #版本二# */
.clearfix:after {
content:“\200B”;
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}

/* #版本二# */
.clearfix:after {
    content:"\200B";
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}

[css] view plain copy

print ?

/* #版本三# （推荐使用） */
/* 同时加入:before以解决现代浏览器上边距折叠的问题 */
.clearfix:before,.clearfix:after{
content:“”;
display:table;
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* #版本三#  （推荐使用） */
/* 同时加入:before以解决现代浏览器上边距折叠的问题 */
.clearfix:before,.clearfix:after{         
          content:"";
          display:table;
}
.clearfix:after{clear:both;}   
.clearfix{*zoom:1;}

补充：BFC

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的主要特征: 1.BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。 2.BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

       能够触发(Block Formatting Context)BFC的方式有：
        根元素html；
        float的值不为none；
        overflow的值不为visible；
        display的值为table-cell, table-caption, inline-block,flex,inline-flex中的任何一个；
        position的值不为relative和static。

通过overflow闭合浮动，实际上已经创建了新的块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，闭合浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是一系列的bug;始终要明白，如果单单只是需要闭合浮动，overflow就不要使用

三：三栏布局小结

1，圣杯布局

圣杯布局：给父容器设置height和左右padding；主子容器放在最前以优先加载，子容器全部左浮动，靠设置负margin和相对定位来实现两栏、三栏布局、多栏布局

       优点: 1.使主要内容列先加载。
       2.允许任何列是最高的。
       3.没有额外的div。

4.需要的hack很少

注：使用圣杯布局三栏布局时，若中间栏的宽度小于左右定宽栏的宽度时，布局就会发生紊乱！！！使用双飞翼布局不存在这种问题；左右两栏设置百分数宽度也可以避免这种问题。

[html] view plain copy

print ?

<style type=“text/css”>
*{
padding: 0;
margin: 0;
}
.header,.footer{
height: 100px;
text-align: center;
background-color: green;
}
span,h4{
font-size: 20px;
line-height: 100px;
}
.container{
height: 250px;
/* 这里的10%是相对视窗的 */
padding:0 10%;
/* padding: 0 200px; */
}
.main{
width: 100%;
height: 250px;
background-color: #E14E14;
float: left;
}
.left,.right{
/* 为什么是12.5%？ */
/* 这里的12.5%是相对其父元素的宽度的，其父元素的宽度为视窗的80%(去掉左右padding)， */
/* 所以有12.5*0.8=10，这样就刚好等于视窗的padding的宽度了 */
width: 12.5%;
/* width: 200px; */
height: 250px;
float: left;
/* 为什么要用相对定位？因为右边一栏只通过设置margin无法实现*/
position: relative;
}
.left{
background-color: #1077DB;
margin-left: -100%;
left: -12.5%;
/* left: -200px; */
}
.right{
background-color: #617608;
margin-left: -12.5%;
right: -12.5%;
/* margin-left: -200px; */
/* right: -200px; */
}
</style>
<body>
<div class=“header”>
<h4>Header</h4>
</div>
<div class=“container”>
<div class=“main”>
<p>main</p>
</div>
<div class=“left”>
<p>left</p>
</div>
<div class=“right”>
<p>right</p>
</div>
</div>
<div class=“footer”>
<span>Footer</span>
</div>
</body>

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .header,.footer{
        height: 100px;
        text-align: center;
        background-color: green;
    }
    span,h4{
        font-size: 20px;
        line-height: 100px;
    }
    .container{
        height: 250px;
        /* 这里的10%是相对视窗的 */
        padding:0 10%;
        /* padding: 0 200px; */
    }
    .main{
        width: 100%;
        height: 250px;
        background-color: #E14E14;
        float: left;


    }
    .left,.right{
        /* 为什么是12.5%？ */
        /* 这里的12.5%是相对其父元素的宽度的，其父元素的宽度为视窗的80%(去掉左右padding)， */
        /* 所以有12.5*0.8=10，这样就刚好等于视窗的padding的宽度了 */
        width: 12.5%;
        /* width: 200px; */
        height: 250px;
        float: left;
        /* 为什么要用相对定位？因为右边一栏只通过设置margin无法实现*/
        position: relative;
    }
    .left{
        background-color: #1077DB;
        margin-left: -100%;
        left: -12.5%;
        /* left: -200px; */
    }
    .right{
        background-color: #617608;
        margin-left: -12.5%;
        right: -12.5%;
        /* margin-left: -200px; */
        /* right: -200px; */
    }
</style>


<body>
    <div class="header">
        <h4>Header</h4>
    </div>
    <div class="container">
        <div class="main">
        <p>main</p>
        </div>
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
        </div>
    </div>
    <div class="footer">
        <span>Footer</span>
    </div>
</body>

2，双飞翼布局

相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin

       双飞翼布局的好处：1.主要的内容先加载的优化; 这是用圣杯布局和双飞翼布局的主要原因！！！
       2.兼容目前所有的主流浏览器，包括IE6在内；
       3.实现不同的布局方式，可以通过调整相关CSS属性即可实现。

[html] view plain copy

print ?

<style type=“text/css”>
body,div{
padding: 0;
margin: 0;
}
.header,.footer{
height: 100px;
text-align: center;
background-color: green;
}
span,h4{
font-size: 20px;
line-height: 100px;
}
.container{
overflow: hidden;
}
.main{
width: 100%;
height: 250px;
background-color: #E14E14;
float: left;
/* main本身设置了100%的宽度，所以再设置margin、padding都会使其真实占有宽度超过其父容器， */
/* 所以这里应该给main的子容器设置margin */
}
.main-inner{
/*margin: 0 10%;*/
margin: 0 200px;
}
.left,.right{
/*width: 10%;*/
width: 200px;
height: 250px;
float: left;
}
.left{
background-color: #1077DB;
margin-left: -100%;
}
.right{
background-color: #617608;
/*margin-left: -10%;*/
margin-left: -200px;
}
</style>
<body>
<div class=“header”>
<h4>Header</h4>
</div>
<!– 这里container可以不需要 –>
<div class=“container”>
<div class=“main”>
<div class=“main-inner”>
<p>main</p>
</div>
</div>
<div class=“left”>
<p>left</p>
</div>
<div class=“right”>
<p>right</p>
</div>
</div>
<div class=“footer”>
<span>Footer</span>
</div>
</body>

<style type="text/css">
    body,div{
        padding: 0;
        margin: 0;
    }
    .header,.footer{
        height: 100px;
        text-align: center;
        background-color: green;
    }
    span,h4{
        font-size: 20px;
        line-height: 100px;
    }
    .container{
        overflow: hidden;
    }
    .main{
        width: 100%;
        height: 250px;
        background-color: #E14E14;
        float: left;
        /* main本身设置了100%的宽度，所以再设置margin、padding都会使其真实占有宽度超过其父容器， */
        /* 所以这里应该给main的子容器设置margin */
    }
    .main-inner{
        /*margin: 0 10%;*/
        margin: 0 200px;
    }
    .left,.right{
        /*width: 10%;*/
        width: 200px;
        height: 250px;
        float: left;
    }
    .left{
        background-color: #1077DB;
        margin-left: -100%;
    }
    .right{
        background-color: #617608;
        /*margin-left: -10%;*/
        margin-left: -200px;
    }
</style>


<body>
    <div class="header">
        <h4>Header</h4>
    </div>
    <!-- 这里container可以不需要 -->
    <div class="container">
        <div class="main">

            <div class="main-inner">
                <p>main</p>
            </div>
        </div>
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
        </div>
    </div>
    <div class="footer">
        <span>Footer</span>
    </div>
</body>

3，一般三栏/多栏布局

布局思想：先左右浮动，然后中栏设置margin
这种布局必须把左右浮动放前面，中栏放最后面，所以无法做到像圣杯布局、双飞翼布局那样可以让主要内容优先加载！

[css] view plain copy

print ?

body,div,p{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: green;
}
.right{
float: right;
width:200px;
height: 400px;
background-color: gray;
}
.middle{
margin: 0 220px;
height: 400px;
background-color: #9AA507;
}

body,div,p{
    padding: 0;
    margin: 0;
}
.container{
    overflow: hidden;
}
.left{
    float: left;
    width: 200px;
    height: 400px;
    background-color: green;
}
.right{
    float: right;
    width:200px;
    height: 400px;
    background-color: gray;
}
.middle{
    margin: 0 220px;
    height: 400px;
    background-color: #9AA507;
}

4，Flex布局

待更新…

            </div># 欢迎使用Markdown编辑器写博客

本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：

Markdown和扩展Markdown简洁的语法
代码块高亮
图片链接和图片上传
LaTex数学公式
UML序列图和流程图
离线写博客
导入导出Markdown文件
丰富的快捷键

快捷键

加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

定义列表

Markdown　Extra　定义列表语法：项目１项目２

定义 A

定义 B

项目３

定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

脚注

生成一个脚注1.

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 。
块级公式：

x = - b \pm b 2 - 4 a c - - - - - - - \sqrt 2 a

$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

更多LaTex语法请参考这儿.

UML 图:

可以渲染序列图：

或者流程图：

关于 序列图 语法，参考这儿,
关于 流程图 语法，参考这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
IE９以下不支持
IE９，１０，１１存在以下问题
1. 不支持离线功能
2. IE9不支持文件导入导出
3. IE10不支持拖拽文件导入

这里是脚注的内容. ↩

飞飞飞呀飞

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
前端居中文本（包括垂直居中，水平居中）

一：居中效果实现小结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1，文本居中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文本水平居中：text-align:center;&nbsp;&nbsp;&amp
复制链接

扫一扫