行盒的垂直对齐

深藏阁楼爱情的钟 2023-03-04 06:58 1阅读 0赞

### 文章目录 ###

*  行盒的垂直对齐
 *   *  多个行盒垂直方向上的对齐
     *  图片的底部白边

# 行盒的垂直对齐 #

## 多个行盒垂直方向上的对齐 ##

给没有对齐元素设置vertical-align，可以是预设值也可以是数值

<input type="checkbox">
        <span>垂直居中XXXXX</span>

input[type="checkbox"] { 
                width: 50px;
                height: 50px;
                vertical-align: middle;
            }

## 图片的底部白边 ##

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

<div>
            <img src="./timg.jpg" alt="">
        </div>

div { 
                border: 2px dashed #333;
            }
    
            img { 
                width: 500px;
            }

1.  设置父元素的字体大小为0（受限）

<div>
            <img src="./timg.jpg" alt="">
        </div>

div { 
                font-size: 0;
                border: 2px dashed #333;
            }
    
            img { 
                width: 500px;
            }

1.  将图片设置为块盒

<div>
            <img src="./timg.jpg" alt="">
        </div>

div { 
                border: 2px dashed #333;
            }
    
            img { 
                width: 500px;
                display: block;
            }

发表评论取消回复

表情：

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

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

相关阅读

相关垂直对齐图像旁边的文本？

问：为什么 vertical-align: middle 不起作用？然而，vertical-align: top确实有效。跨度\{垂直对齐：中间； \} 不起作用。

约定不等于承诺〃/ 2024年03月29日 14:46/ 0 赞/ 70 阅读

相关 css - 垂直对齐

css - 垂直对齐非原生行内块为了方便叙述，我们把转换为行内块的元素称为非原生行内块元素单行/多行元素在学习垂直对齐前，需要先把在一行上显示的元素分出两个概念

素颜马尾好姑娘i/ 2023年06月05日 12:45/ 0 赞/ 130 阅读

相关行盒的垂直对齐

文章目录行盒的垂直对齐多个行盒垂直方向上的对齐图片的底部白边行盒的垂直对齐多个行盒垂直方向上的对齐给没有对齐元素

深藏阁楼爱情的钟/ 2023年03月04日 06:58/ 0 赞/ 2 阅读

相关 css3内容垂直居中对齐

第一步：首先需要给盒子添加高度和宽度属性（勿忘）第二步：然后用flex布局： Justify-content:center; align-item

阳光穿透心脏的1/2处/ 2022年10月05日 04:46/ 0 赞/ 354 阅读

相关 CSS制作水平垂直居中对齐

CSS制作水平垂直居中对齐 http://www.w3cplus.com/css/vertically-center-content-with-css

怼烎@/ 2022年09月25日 10:21/ 0 赞/ 288 阅读

相关垂直居中对齐CSS代码

垂直居中对齐的核心代码如下： .elment{ position:relative; top:50%; transfo

约定不等于承诺〃/ 2022年08月24日 14:14/ 0 赞/ 260 阅读

相关让图片和文字在一行中垂直居中对齐的方法

如果一个盒子有2列或者3列排列，有图片，有文字，怎么实现文字始终对齐图片的中间位置呢？方法就是使用vertical-align:middle;也就是给一列都使用这个属性，需

痛定思痛。/ 2022年05月19日 09:08/ 0 赞/ 490 阅读

相关【CSS】布局 - 水平 & 垂直对齐

![在这里插入图片描述][20190129183148727.png] 元素居中对齐要水平居中对齐一个元素(如 ), 可以使用 margin: auto;。设

r囧r小猫/ 2022年04月23日 08:50/ 0 赞/ 269 阅读

相关垂直居中对齐

html结构： //<!-- - ->注释掉空格 <div class="verMiddle outerLayerWrap"><!--

逃离我推掉我的手/ 2022年01月20日 10:53/ 0 赞/ 335 阅读

相关 CSS 布局 - 水平 & 垂直对齐

元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。外边距设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度

秒速五厘米/ 2021年09月15日 05:32/ 0 赞/ 423 阅读