css 垂直对齐-如何实现css图片的垂直对齐

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文主要介绍css图片垂直对齐的实现方式，有一定的参考价值，有需要的同学可以参考一下。 希望您读完本文后有所收获。 让小编带你一起来了解一下吧。

垂直对齐属性

我们使用text-align属性来定义图像水平对齐方式。

你开始产生怀疑了。 我们已经实现了图片的水平对齐，那么如果想要垂直对齐图片怎么办呢？

在CSS中，我们可以使用vertical-align属性来定义图像的垂直对齐方式。

句型：vertical-align：属性值；

Vertical-align还有一些属性值如sub、super等，这些我们不需要关注，因为在实际开发中并没有用到它们。 我们只需要使用上面4个属性值就完全足够了。

示例1：

 


    
    
        img{width:80px;height:80px;}
        #img_1{vertical-align:top;}
        #img_2{vertical-align:middle;}
        #img_3{vertical-align:bottom;}
        #img_4{vertical-align:baseline;}
    


    本站本站（top）
    

    本站本站（middle）
    

    本站本站（bottom）
    

    本站本站（baseline）

仔细一看，“vertical-align:baseline”和“vertical-align:bottom”之间是有区别的。

示例2：

 


    
    
        div
        {
            width:100px;
            height:80px;
            border:1px solid gray;
        }
        .div_img1{vertical-align:top;}
        .div_img2{vertical-align:middle;}
        .div_img3{vertical-align:bottom;}
        img{width:60px;height:60px;}
    


    

        
    
    

        
    
    

        
    

疗效如下：

啊？ ！ 这是怎么回事？ 为什么图像没有按预期垂直对齐？ 啊css 垂直对齐，虽然你对vertical-align属性有误解，但是vertical-align属性的定义是：vertical-align属性定义了内联元素相对于元素的垂直对齐方式。

感谢您仔细阅读本文。 希望小编分享的实现css图片垂直对齐的内容对大家有所帮助。 同时也希望您支持本站，关注本站行业信息频道css 垂直对齐，遇到问题及时找到本站。 ，详细解决方案等你来学习！