垂直居中的又一种方法（补充）

逃离我推掉我的手 2023-06-25 02:30 16阅读 0赞

### 垂直居中 ###

之前我说line-height只能让文本居中，多次练习后，我发现我错了 o(╥﹏╥)o，他是可以让内联元素上下居中的。  
**只要：**

*  父元素
    
     *  line-height==height
 *  子元素
    
     *  display:inline-block; /\*只要是内联元素就OK了 \*/
     *  vertical-align:middle;

你也可以再给父元素加上text-align:center;可以同时实现左右居中效果。

*  示例

.box1{ 
                width: 300px;
                height: 300px;
                background:#1ebea2;
                
                line-height: 300px; /*找准中线*/
                text-align: center; 
            }
            img{ 
                width: 200px;
                height: 200px;
                vertical-align: middle;  /*与中线对齐*/
            }

<div class="box1">
          <img src="./images/7bf31d34c567.png" alt="">
    </div>

效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191224194023210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关垂直居中的又一种方法（补充）

垂直居中之前我说line-height只能让文本居中，多次练习后，我发现我错了 o(╥﹏╥)o，他是可以让内联元素上下居中的。只要：父元素

逃离我推掉我的手/ 2023年06月25日 02:30/ 0 赞/ 17 阅读

相关 div垂直居中的几种方法

第一种 1. 父类 .father { height:100%; // height:100vh; width:100%;

小鱼儿/ 2023年03月03日 08:48/ 0 赞/ 210 阅读

相关垂直居中的7种方法

1、水平垂直居中 <div class="center"> <span>垂直居中</span> </div>

拼搏现实的明天。/ 2022年08月05日 13:23/ 0 赞/ 223 阅读

相关 CSS垂直居中的几种方法

> 单行内容居中单行文字居中，只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是

傷城~/ 2022年07月28日 04:28/ 0 赞/ 270 阅读

相关居中的又一方法：flex

css文档： body,html{ height:100%; width:100%; } .testflex{ height:100%; width:100%

淩亂°似流年/ 2022年06月18日 05:25/ 0 赞/ 140 阅读

相关 CSS 元素垂直居中的 6种方法

CSS 元素垂直居中的 6种方法利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left

淡淡的烟草味﹌/ 2022年06月05日 23:59/ 0 赞/ 332 阅读

相关三种垂直居中的方法

总结三种常用的垂直居中的方法 1.多个块级元素垂直居中，利用绝对定位以及transform，适用于不知道元素的宽度和高度。 .parent{ position:r

骑猪看日落/ 2022年05月16日 04:16/ 0 赞/ 208 阅读

相关 css垂直居中的几种方法

`<div ``class``="app app1"><span>垂直居中的元素</span></div>` 一： `.app1{` ` ``display: ta

灰太狼/ 2022年03月25日 13:10/ 0 赞/ 330 阅读

相关 CSS垂直水平居中的几种方法

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 ![aHR0cHM6Ly91c

柔光的暖阳◎/ 2021年10月24日 01:14/ 0 赞/ 808 阅读

相关 CSS垂直居中的8种方法

CSS垂直居中的8种方法 1、通过verticle-align:middle实现CSS垂直居中。通过vertical-align:middle实现CSS垂直居中是最常

古城微笑少年丶/ 2021年07月26日 11:38/ 0 赞/ 485 阅读