关于居中

最新推荐文章于 2024-07-10 15:31:18 发布

落花新月

最新推荐文章于 2024-07-10 15:31:18 发布

阅读量462

点赞数

分类专栏： Web前端文章标签：居中 margin0 auto 水平居中

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/51292301

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
关于居中

1.水平居中：行内元素：1）文本以及图片等行内元素的居中：父元素 text-align:center; 如下：html>lang="en"> charset="UTF-8"> 水平居中 div{margin-top: 20px; } .txt,.imgAlign{border:1px solid pink;}
复制链接

扫一扫

专栏目录