css要注意的细节问题--vartical-优快云博客

本文介绍了如何在同一行中对齐图片与输入框的方法，并深入解析了vertical-align属性的各种取值及其显示效果，帮助读者更好地掌握网页元素的垂直对齐技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：如何使同一个div中的图片和input框在同一行上？

<div class="vote" style="border:1px solid red;">
<input type="text" style="height:0.5rem;width: 1.5rem;line-height: 0.7rem;border: 0.02rem solid #a5de37;margin-left: 0.7rem;padding-left: 0.1rem;
vertical-align: middle;" name="verity" placeholder="请输入验证码">    //这里设置input和img和button都为vertical-align:middle即可
<img style="width: 1rem;height: 0.5rem;border:1px solid red;
vertical-align: middle;margin-left:10px;margin-right:10px;" src="/index.php/Sheying/random">
<button id="vote" style="cursor:no-drop;background-color:rgb(0, 240, 240);height:0.54rem;width:1.5rem;
vertical-align: middle;" data-id="1">已投票</button>
</div>

2：了解vertical-align的属性？

Baseline:图片(内含文字)和文字以文字基准对准对齐

middle:以文字最下方为基线对齐

sub和bottom:指上标和小标

参考：http://www.cnblogs.com/hejia/archive/2012/12/31/2840227.html

转载于:https://www.cnblogs.com/jtjds/articles/5449454.html