昨日，小编的朋友就来咨询，说他也遇到了这个问题，并且使用margin、padding等Css语法，都没有解决。

　　解决方法其实很简单，我们只要加上vertical-align:middle属性就可以了。

　　来看实例：

<input name="jb51" type="text" size="28" value="" style="vertical-align:middle" /><img src="/UploadFiles/2021-03-30/logo.gif"><br><input class="fn-butt" type="button" value="运行代码" onclick="runCode('runcode5')"> <input class="fn-butt" type="button" value="复制代码" onclick="copy2(runcode5)"> <input class="fn-butt" type="button" value="另存代码" onclick="saveCode(runcode5)"> 提示：您可以先修改部分代码再运行<br><br>页面直接摆放一个input文本框与ImageButton图片按钮，但是发现没有对齐： <br><br><br><u>复制代码</u>代码如下: <br><input type="text" id="txtQty" /> <br><asp:ImageButton ID="IBtnBuy" runat="server" /> <br><br><br>如图所示<br><br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/201306281253096.png');"><img src="/UploadFiles/2021-03-30/201306281253096.png" alt="Input标签与图片按钮水平对齐解决方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><br><br>其实只要给图片按钮添加一个css属性就可以： <br><br><br><u>复制代码</u>代码如下: <br><asp:ImageButton ID="IBtnBuy" runat="server" CssClass="btnImg" /> <br>.btnImg{ vertical-align:middle; } <br><br><br>这样就对齐了：<br><br></p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/201306281253097.png');"><img src="/UploadFiles/2021-03-30/201306281253097.png" alt="Input标签与图片按钮水平对齐解决方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p></div> </div> <div class="tags my-2"> <i class="iconfont icon-tags"></i><a href="/Html/1/73324.html" rel="tag" class="tag-%e6%a0%b8%e6%b3%84%e6%bc%8f color-6" one-link-mark="yes" title="Input,图片按钮,水平对齐">Input,图片按钮,水平对齐</a> </div> <div class="post-apd">DDR爱好者之家 Design By 杰米</div> </div> </div> <div class="single-top-area text-sm clearfix card mt-4"> <div class="card-body"> <strong>广告合作：</strong>本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）<br> <strong>免责声明：</strong>本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！</a> </div> </div> <div class="near-navigation rounded mt-4 py-2"> <div class="nav previous border-right border-color"> <a class="near-permalink" href="#" one-link-mark="yes"> <span>上一篇</span> <h4 class="near-title"><a href="/Html/1/73323.html" title="图片轮换的两边按钮的加载与控制如何通过像素定位">图片轮换的两边按钮的加载与控制如何通过像素定位</a></h4> </a> </div> <div class="nav next border-left border-color"> <a class="near-permalink" href="#" one-link-mark="yes"> <span>下一篇</span> <h4 class="near-title"><a href="/Html/1/73325.html" title="完美解决IE兼容模式问题(使IE使用固定的渲染模式)">完美解决IE兼容模式问题(使IE使用固定的渲染模式)</a></h4> </a> </div> </div> <!-- comments --> <div class="post-apd mt-4">DDR爱好者之家 Design By 杰米</div> <div id="comments" class="comments"> <h1 id="comments-list-title" class="comments-title h5 mx-1 my-4"> <i class="iconfont icon-comment"></i> <span class="noticom"> <a href="/Html/1/73324.html#respond" class="comments-title" one-link-mark="yes" title="Input标签与图片按钮水平对齐解决方法">评论“Input标签与图片按钮水平对齐解决方法”</a> </span> </h1> <div class="card"> <div class="card-body"> <div id="respond_box"> <div id="respond" class="comment-respond"> <form action="#" method="post" id="commentform" class="text-sm mb-4"> <div class="visitor-avatar d-flex flex-fill mb-2"> <img class="v-avatar rounded-circle" src="/images/gravatar.jpg"> </div> <div class="comment-textarea mb-3"> <textarea name="comment" id="comment" class="form-control" placeholder="输入对“Input标签与图片按钮水平对齐解决方法”评论内容..." tabindex="4" cols="50" rows="3">