不同元素对齐的有关问题：需要底部，或者是中间对齐-HTML教程-爱易网页

不同元素对齐的有关问题：需要底部，或者是中间对齐

日期：2014-05-17　浏览次数：20623 次

不同元素对齐的问题：需要底部，或者是中间对齐。

HTML code


<table>
    <tr>
        <td>
            <input type="text" style="height:16px; width:27px" id="text1" />
            <input type="image" src="images/logo.gif" style="height:16px; width:16px;" id="image1" />
        </td>
    </tr>
</table>

怎么写样式可以让image1和text1底部对齐（或者中间对齐）？？

按照上面的写法，image1的显示位置总会高于text1
（貌似image1的底部是和text1的中间对齐的，如果将两个元素分别放到不同的TD，垂直对齐样式就又起作用了！）。

按照上面的写法，使用CSS怎么设置对齐？

------解决方案--------------------
image1和text1底部对齐:

HTML code


<table>
    <tr>
        <td>
            <input type="text" style="height:16px; width:27px" id="text1" />
            <input type="image" src="images/logo.gif" style="height:16px; width:16px; vertical-align:bottom" id="image1" />
        </td>
    </tr>
</table>

------解决方案--------------------

用css 控制 最终还是会遇到 兼容的问题，还不如改页面的好呢。
HTML code


<table>
    <tr>
        <td>
            <input type="text" style="height:16px; width:27px" id="text1" />
        </td>
        <td>
            <input type="image" src="images/logo.gif" style="height:16px; width:16px;" id="image1" />
        </td>
    </tr>
</table>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

不同元素对齐的有关问题：需要底部，或者是中间对齐

相关资料更多>

推荐阅读更多>