居中对齐两个难点的实现

用户9914333

发布于 2022-07-22 14:27:34

57700

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

今天与大家分享居中对齐的两个难点。多行文本垂直居中与不定宽的水平居中

1、多行文本垂直居中

方法1：

vertical-align:middle;

注：vertical-align 作用单元格时，才生效，所以一般会结合dispaly: table-cell ; 一起使用才有效果

示例：

p{
    border: 1px solid red;
    height: 100px;
    display:table-cell;
    vertical-align:middle;
}

方法2：

1. 父级的标签，高度和行高一致

p{
   height: 200px;
   line-height: 200px;
  border: 1px solid red;
   font-size: 16px;
}

2. 子标签, 设置为行内块级元素，垂直居中，且单独设置行高

注： line-hight: 1 这里的1指与父级的字体大小相同，你也可以直接写具体的px

p span{
       display: inline-block;
       vertical-align: middle;
       line-height: 1;
}

完整代码：

<style>
     p{
        height: 200px;
        line-height: 200px;
        border: 1px solid red;
        font-size: 16px;
    }
    p span{
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
    }
</style>
<p>
      <span> Lorem ipsum dolor sit amet, 
      iusto, nam qui quia quidem vel veritatis vitae.
      </span>
</p>

2、不定宽的块级元素水平居中

采用绝对定位使用

思路：

1.外层绝对定位，内层相对定位，外层的外层相对定位

2.外层左浮动，内层左浮动

3.外层右移50%，内层左移50%

示例：

样式部分：
<style>
    *{
margin: 0;
padding: 0;
    }
ul li{
list-style-type: none;
border: 1px solid red;
    }
.container{
position: relative;
/* 外层的外层相对定位 */
    }
nav  ul:after{
content: "";
display: block;
clear: both;
    }
.pages3 {
position: absolute;
/*外层绝对定位*/
float: left;
left: 50%;
    }
.pages3 li{
float: left;
position: relative;
/*内层相对定位*/
right: 50%;
    }
.pages3 li:not(:first-child){
margin-left:5px;
    }
</style>
html部分：
<header class="container">
<nav>
<ul class="pages3">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</nav>
</header>

分析：

此方法有left:50%, 在margin-left:负的宽度的一半，只是宽度不确定，

所以就采用了position:relative; , right:50%; 而right：50%，

其实就是向左移动宽度的一半，

这里的百分比是以父级的宽度计算的

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除

cell