【在这副图上面，我的三个词语都是这样在上面的，想要让他们都保持居中 _布局】

在这副图上面，我的三个词语都是这样在上面的，想要让他们都保持居中

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(3)

布局

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="task4.css">
</head>

<body>
    <header>
        <span style="float: left;">关闭</span>
        <span>登陆</span>
        <span style="float:right;">注册</span>
    </header>
</body>

</html>





body{
    padding: 0;
    margin: 0;
}
span{
    margin: 0; 
}
header {
    width: 720px;
    height: 88px;
    padding: 0px;
    margin: 0px;
    background-color: #5fc0cd;
    text-align: center;
}
span{
    color: white;
    font-size: 20px; 
    display:inline-block;
   
}

编辑于2024-11-24

时间排序

热门排序

[上海|结业弟子]JS-任我行
0

这个可以使用后代选择器+:nth-child() 选择器来做

比如写成header span:nth-child(1)

header span:nth-child(2)

header span:nth-child(3)

分别来选择到三个span标签，再给它写上对应的css属性即可
保持垂直居中的话，这里只要给header设置line-height即可

查看全部>

编辑于2018-09-07
[郑州|结业弟子]JS-徐海达
0

就正常的垂直居中就可以了，使用line-height，或者使用其他的垂直居中方法，建议使用flex，flex的话你就把之前的东西去掉直接在父盒子上面加flex.

查看全部>

编辑于2018-09-26
[成都|结业弟子]JS-董家宇
0

用弹性盒子布局（flex），justtify-content: center和align-items:center来实现垂直居中和水平居中

查看全部>

编辑于2019-01-20

去第页