元素垂直对齐(比如图片)

最新推荐文章于 2024-08-06 14:02:36 发布

linqunbin

最新推荐文章于 2024-08-06 14:02:36 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/linqunbin/article/details/92059517

CSS 专栏收录该内容

6 篇文章

订阅专栏

定义和用法
verticalAlign 属性设置内容在元素框中的垂直对齐方式。
如下图:
在这里插入图片描述
验证码输入框与验证码图片并没有垂直对齐.
使用verticalAlign可以实现元素垂直对齐,代码如下:

 <style>
        /*验证码 输入框和验证码 对齐，input 和 img 实现对齐。*/
        #validNum, #img {
		    vertical-align: middle;
	    }
    </style>

 <span>
        <input id="validNum" type="text" name="valid_num" required="required" placeholder="验证码,区分大小写">
    </span>

    <span>
        <a id="validCode" href="javascript:">
            <img id="img" src="{% url 'get_valid_img' %}" alt="暂无图片">
        </a>
     </span>

效果如下:
在这里插入图片描述