关于居中

来源：互联网发布：无法登录战网检查网络编辑：程序博客网时间：2024/05/18 03:16

1.水平居中：

行内元素：

1）文本以及图片等行内元素的居中：父元素 text-align:center;

如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>水平居中</title>    <style>        .txt,.imgAlign{border:3px solid pink;}        .txt{width:150px; margin:20px auto;}        .imgAlign{text-align: center}         </style></head><body><div>    <div class="txt">要居中的文字内容</div>    <div class="imgAlign"><img src="images/01.png"></div>   </div></body></html>

块级元素：

2）固定宽度的块级元素：margin:0 auto;

给.txt添加宽度，

.txt{width:150px; text-align: center}

则文字不能居中，此时要通过margin来解决居中的问题。

如：

<style>    .txt,.imgAlign{border:3px solid pink;}    .txt{width:150px; margin:20px auto;}    .imgAlign{text-align: center}</style>

（2）通过定位，（margin值或者top,left等值固定到某一个位置上）

3）不定宽度的块级元素：

（1）通过display:inline-block; 转化成行内快，然后给父元素text-align:center;

如：

ul>li{    display: inline-block;}ul{    text-align: center;    background-color:orange;    list-style: none;}

<ul>    <li>太阳花</li>    <li>民族</li>    <li>美声</li>    <li>通俗</li></ul>

（2）text-align:center;

.left,.right{    float: left;    margin-right:20px;    background-color: yellow;}.left{text-align: center}

<div class="test">    <div class="left">        <p>左侧内容</p>        <p>你是那一树一树的花开</p>        <p>是梁间燕的呢喃</p>        <p>是爱</p>        <p>是嗳</p>    </div>    <p class="right">右侧内容</p></div>

(3)脱离标准流的情况下，让子盒子占有父盒子宽度的百分比，然后按照已知宽度的情况进行调整。

简单的来说就是：margin:0 auto要和宽度配合使用；行内元素用text-align设置居中；脱标的情况按照位移tranlate来实现。

2.垂直居中

line-heiight

vertical-align

0 0