css 右对齐_CSS居中问题总结

最新推荐文章于 2024-08-31 14:41:23 发布

weixin_39802055

最新推荐文章于 2024-08-31 14:41:23 发布

阅读量705

点赞数

文章标签： css 右对齐 css 图片居中 css图片居中 css文字竖直显示 div元素居中 div内容居中

题外话

耽搁了半年的学习，发现如今还得重头学，我真是个天才！！

居中问题大概可以分为水平居中和竖直居中，同时又分为行内元素和块级元素。现在我就跟随我一起总结一下。

一、利用text-align:center实现水平居中

你一定想问text-align是啥，来一起探讨一下text-align是个什么东西

关于text-align 在w3school中是这样解释的：

意思就是对一个元素内部的文本进行水平对齐

有如下的选项（这就相当于word文件的对齐方式一样的有左对齐、右对齐、居中对齐）

left：居左对齐 
right：右对齐 
center：居中 
start：如果方向是左向右（ltf）的话=left end：同上 
justify：两端对齐，最后一行无效 
justify-all：强制最后一行两端对齐 
match-parent：和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或者right。

我们在使用的使用要在容器下使用，如果在span 这种标签中使用，是不会进行水平居中的。

单个内联元素

然而在实际测试中会发现不仅仅对文本元素有效！嘿嘿嘿，我们一起来看一下。

我们就不测试文本元素了，我们先从div块开始，然后用cssz将他display:inline一下，看一下效果

html中的代码如下：（为了便于观看设置边框并把父级元素设置成了 100px高度。）

<div class="father">
            <div class="son">
            </div>
        </div>

css代码如下

.father {
    border: 1px solid #000;
    height: 100px;
}

.son {
    /*display: inline;*/
    border: 1px solid #ccc;/*变为内联元素之后，由于是内联元素，高度对其不起作用*/
    height: 50px;
}

显示效果如图：

将css中注释去掉，加上text-align:center可以发现：

可以发现！居中了，所以我们可以知道这个text-align不仅仅对文本有效果，对于inline都有居中的效果。

之后在尝试display:inline-block

.father {
    border: 1px solid #000;
    height: 100px;
    text-align: center;
}

.son {
    display: inline-block;
    border: 1px solid #ccc;
    height: 50px;
}

也可以居中！所以text-align的第二个作用，就是对inline-block也有居中效果！

多个内联元素（一个内联标签+一个图片标签）

对于我来说，在探究内联标签的时候，我总会考虑到图片的标签，总觉得图片和他们不太一样。

这是html代码

    <div class="father">
        <img src="location.png">
        <span>这是内联元素</span>
    </div>

同样在只加边框的效果是这样的。

图片撑开了father容器，并且文本以图片底端对齐，在之前的文章中探讨过这个问题。

再加入了样式之后

.father {
    border: 1px solid #ccc;
    text-align: center;
}

还是一样的。

除了用text-align之外，还可以用flex布局的justify-content。以下是实例；

.father {
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
}

同样成功了！想了解flex布局的话，推荐看一下这个内容

Flex 布局语法教程 | 菜鸟教程www.runoob.com!图标

【小节】行内元素不管是几个都是可以用text-align进行水平居中的。

所以总结一下：

行内元素水平居中比较简单，只需要在父容器加入text-align:center这行代码
text-align对于具有inline属性的元素都有水平居中的效果。
适用于多个元素。

二、利用margin：auto

margin:auto这个属性的意思是，父元素-子元素/2的外边距。所以如果给定了父子宽高的话话，会很容易居中。

既然我们对内联元素居中不了，那我们就将他变身，变成易于操控的块！只有一个内联元素，首先将这个元素变为block，然后设置margin:auto（前提是需要设置宽度 auto的原理就是确认好元素宽度用(父元素宽度-元素宽度)/2）

按照常理来讲，我们将父子元素设置宽高之后，应用margin:auto自适应，就会出现垂直居的效果，可是造化弄人，人生难免几多风雨(┬＿┬)。

    <style>
        .father {
            height: 100px;
            background-color: #ccc;
            
        }
        .son {
            height: 50px;
            width: 50px;
            background-color: blue;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

可以看出，水平元素居中了，但是垂直方向有点问题，这是为什么呢？

狠狠的点击这篇文章

这是因为，如果 margin-top或者margin-bottom 设置为auto，他们的值就被设置为0。

// 有时间应该好好研读一下文档。

如何用`margin:auto`实现垂直居中呢？

1. 可以使用`position:absolute` cffg

在上面的代码中加入

    <style>
        .father {
            height: 100px;
            background-color: #ccc;
            position: relative;
            
        }
        .son {
            height: 50px;
            width: 50px;
            background-color: blue;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute;
                    
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

将定位设置为绝对定位，然后将top bottom left right设置为0，同时margin:auto，在父元素加上 position:relative,可以将元素相对父元素，水平居中对齐。

其中张鑫旭大神的一篇文章提到了这个问题：狠狠的点击

三、使用`vertical-align`垂直居中

vertical-align和line-height

关于line-height，张鑫旭写的一篇文章，css行高line-height的一些深入理解及应用，推荐看看。

类似于对块级元素的height，行高是针对于内联元素起作用的。

块级元素有一个box盒子模型，而内联元素也有一个inlinebox 模型，这个模型中每一行都是一个line（哈哈哈哈说的好有趣），所谓line-height 就是这些行的高度啦。具体在上述链接中已经有详细内容。

所以对于单行文字，直接使用line-height设置为父元素盒子宽度即可。

.father {
    height: 100px;
    border: 1px solid #ccc;
    line-height: 100px;
}

效果如图：

但是这个图片好像并没有居中，这是为什么呢？需要深刻理解line-height和vertical-align属性

CSS深入理解vertical-align和line-height的基友关系

彻底搞定vertical-align垂直居中不起作用疑难杂症 - 掘金juejin.im

经过两个文本的学习，我们有了大概的了解。因为默认的是基线baseline 对齐，所以我们需要将两个元素都改为vertical-align:middle改为中间线对齐（x的中心2/3处）

//以下内容出现了一些疑惑，先记下来，日后来解决

现在我们把图片拿掉，并且在代码中加入 “X”

    <div class="father">
        <span>这是内联元素X</span>
    </div>

css代码如下

.father {
    height: 100px;
    border: 1px solid #ccc;
}

.father span{
    vertical-align: middle;
    background-color: red;
}

在加入vertical-align:middle 和不加入两者对比如下。

发现在加入 vertical-align:middle的时候，会下沉一点，而且对比了一下如果默认是基线对齐的话，在未加入vertical-align：middle的时候，应该更下沉才是，然而经过测量，在未加入的时候，是100%对齐的，这让我百思不得其解。

另外需要注意的是，在去掉line-height:100px之后，会发现元素顶端会和边框有一个空隙，这是因为文本默认会有一个line-height，取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的font-family。

//以上是我的疑惑，现在这里停下。

经历了小插曲之后，我们在father的子元素全部添加了vertical-align:middle之后，成功解决了，当然这只是一个近似居中的效果。

对于多行文字，可以使用在文字的后面加一个空白元素。然后利用inlinebox的特点，用line-height将父级元素撑开，然后居中显示。具体代码如下

    <style>
        .father {
            height: 200px;
            background-color: #ccc;
            
            
        }
        .son {
            display: inline-block;
            vertical-align: middle;
        }
        .son1 {
            width: 0;
            line-height: 200px;
            font-size: 0;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>

    <div class="father">
        
        <span class="son">这多行文字，怎么回事啊？小老弟？啊！你看起来很骄傲的样子。我真想狠狠的踢爆你的屁股！哦我的上帝！瞧瞧这该死的居中！垂直方向上的还是多行的</span><span class="son1">&nbsp;</span>
    </div>
</body>

瞧瞧这漂亮的居中！需要注意的是我们进行的是vertical-align:middle按照中线居中的！没有这个是不行的哦。

三、利用flexbox

flex 盒子，就是为了解决垂直居中的困难，在flex中有一个属性，为align-items:center;可以垂直居中。

设置了之后会形成居中的效果。css代码如下

.father {
    height: 100px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
}

效果如图

设置justify-content: space-between;可以水平居中。更多资料请狠狠的点击这里Flex布局教程：语法篇

四、推算法

正如名字一样，所谓推算，就是你需要知道一些已知条件，然后在进行推理。放在这里就是，我们必须知道子元素的宽高才能实现。

在进行之前可以看一下这篇文章，看完之后，我忽然感觉之前学的都是假的！！！position定位

推算top法

    <style>
/* CSS代码 */

.father {
    width: 300px;
    height: 500px;
    border: 1px solid #cdcdcd;
    position: relative;
}
.box{
    background-color: #cdcdcd;
    position: absolute;
    top: 224px;/*(父元素高度-子元素高度-边框高度)/2*/
    left: 124px;/*同上*/
    width: 50px;
    height: 50px;
}
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>

</body>

推算margin法

    <style>
/* CSS代码 */

.father {
    width: 300px;
    height: 500px;
    border: 1px solid #cdcdcd;
    position: relative;
}
.box{
    background-color: #cdcdcd;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -26px;/*子元素的一半*/
    margin-left: -26px;/*同上*/
}
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>

</body>

五、transform

上述方法中，如果不知道元素宽高如何实现呢。

需要用到transform属性，transform: translate(-50%,-50%);

    <style>
/* CSS代码 */

.father {
    width: 300px;
    height: 500px;
    border: 1px solid #cdcdcd;
    position: relative;
}
.box{
    background-color: #cdcdcd;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%,-50%);
}
}
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>

</body>