页面中的居中问题

最新推荐文章于 2023-11-03 10:33:06 发布

Claire_girl

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量683

点赞数

分类专栏： html css 文章标签： css html5

本文链接：https://blog.csdn.net/Claire_girl/article/details/119640708

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

很多面试官也会问到的问题
自己总是分不清vertical-align该不该使用
准备整理一下

文本在盒子中水平居中
text-align:center;
文本在盒子中垂直居中
一、使用line-height
只要设置height和line-height数值相等就可以让文本居中了
相关代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直</title>
    <style>
        .one{
            background-color: turquoise;
            color: white;
            height:100px;
            text-align: center;
            /* 面试题：如果想要垂直居中 */
            line-height: 100px;
        }
    </style>
</head>
<body>

    <div class="one">hello world</div>
</body>
</html>

二、vertical-align:middle
只适用于行内元素，一定记住行内元素不能加宽高，若想修改只能修改display:inline-block

1.前提
盒子中存在多个行内元素
2.基线
行内元素在基线上下排布
基线：写英文字母时，x下面
在这里插入图片描述
先看一下这两个问题

Q1:怎么解决行内元素img的图片下有基线的问题呢？
– 1.使用块元素排放图片 –

 <div class="box1 box">
     <img src="./imges/vertical-test.jpg" alt="" style="display: block;">
 </div>

-- 2.给字体大小设置为0 --
<div class="box2 box" style="font-size: 0;">
    <img src="./imges/vertical-test.jpg" alt="">
</div>

在这里插入图片描述
是不是图片下边的基线距离就没有了

Q2：文字和图片在一起，怎么让图片和文字对齐呢

.box3 >img{
    vertical-align:middle;
}

<div class="box3 box">
    <span>spingx</span>
    <img src="./imges/vertical-test.jpg" alt="">
</div>

基线上方x的1/2处为居中点
在这里插入图片描述 Q3:如何达到如下效果？即在盒子有高度的情况下，如何达到居中效果？

①使用vertical-align:middle让.line对应的行内元素与文字在相同的高度；
在这里插入图片描述 ↓

在这里插入图片描述
②使用line-height控制box内的行高达到整体剧中的效果。

.box{
    line-height: 3.2em;
}
.box > .line{
    /* 一定要让它成为inline-block 因为行内元素不能有宽高 */
    display: inline-block;
    width:1px;
    height:15px;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    
}
<div class="box">
    <span>spingx</span>
    <span class="line"></span>
    <span>spingx</span>
</div>

Q4：如何让一个元素在盒子中垂直居中显示
方法一：设置line-height见Q3
方法二：在要居中的元素后追加一个尾元素，把尾元素设置为inline-block，把它的高度设置为与盒子等同，然后设置vertical-align:middle,这时候该元素也就垂直居中了。另外要给该元素水平居中也只需要在容器中添加text-align:center就可以了。
在这里插入图片描述

.box{
     background-color: slateblue;
     color: #fff;
     height: 100px;
     text-align:center;
 }
 /* 追加一个尾元素，让它和盒子一样高，并垂直居中，即在基线上方文字的1/2处居中 */
 .box::after{
     content: '';
     display: inline-block;
     height:100px;
     vertical-align: middle;
 }

 <div class="box">hello world</div>

盒子应该位于容器内部，容器通常情况要比盒子大

盒子在容器中水平居中
1.margin:0 auto;
2.定位
position:relative;margin:50%; left:-(盒子宽度的一半);
盒子在容器中垂直居中
1.在父元素中加padding，box-sizing:border-box;
2.在父元素加padding+margin，box-sizing:border-box;

Claire_girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面中的居中问题

很多面试官也会问到的问题自己总是分不清vertical-align该不该使用准备整理一下一、使用line-height相关代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫