gpt4 book ai didi

html - CSS 修复与 Button 和图像的对齐

转载 作者:太空宇宙 更新时间:2023-11-04 00:53:13 25 4
gpt4 key购买 nike

我是 CSS 的初学者,如果这个问题太愚蠢,请忽略。我需要您的建议来解决对齐问题。我有一组按钮和一个字形图标图像。按钮等距并对齐(高度:18 像素),而图像不适合(高度:18 像素)。我尝试使用 padding-top,但没有帮助。

<html>
<head>
<style type="text/css">
#glyphImage {
width:16px;
height:18px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td>
<input type="button" value="p">
<input type="button" value="c"><input type="button" value="/c">
<input type="button" value="s"><input type="button" value="/s">
<input type="button" value="l"> <input type="button" value="u">
<input type="button" value="t"><input type="button" value="tr">
<img id="glyphImage" src="si-glyph-image.svg">
</td></tr>
</table>
</body>
</html>

对齐问题:

enter image description here

最佳答案

嗯,有几种方法可以解决这个问题。

选项#1

由于您使用的是表格并且它们非常擅长垂直对齐,因此您可以使用默认值。

在 HTML 中 <td valign="middle"></td>

CSS 中的

td {
vertical-align: middle;
}

选项 #2

使用 CSS Flexbox (这可以在不需要表格的 div 内完成)要么使用你的 td或某种容器元素( divspan 等)

td {
display:flex;
flex-direction: column;
justify-content: center;
}

在任何一种情况下,我都会给每个元素自己的 td如果您要坚持使用表格概念。这会给你更多的控制权。

<tr>
<td><input type="button" value="p"></td>
<td><input type="button" value="c"></td>
<td><input type="button" value="/c"></td>
<td><input type="button" value="s"></td>
<td><input type="button" value="/s"></td>
<td><input type="button" value="l"></td>
<td><input type="button" value="u"></td>
<td><input type="button" value="t"></td>
<td><input type="button" value="tr"></td>
<td><img id="glyphImage" src="si-glyph-image.svg"></td>
</tr>

关于html - CSS 修复与 Button 和图像的对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55433822/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com