gpt4 book ai didi

html - 将 CSS/HTML 中的按钮与文本水平对齐一行?

转载 作者:搜寻专家 更新时间:2023-10-31 23:06:09 25 4
gpt4 key购买 nike

我想知道如何水平对齐我的按钮?最重要的是,我想向这些按钮添加文本。这是我目前拥有的。

HTML 正文部分:

<body> 
<div class="tile_div">
<table class="tile_table">
<tr>
<td>
<img class="tile_image" height="50px" width="100px" src="./images/button_left.png"/>
<p class="tile_p">Button one</p>
</td>
<td>
<img class="tile_image" height="50px" width="100px" src="./images/button_left.png"/>
<p class="tile_p">Button two</p>
</td>
<td>
<img class="tile_image" height="50px" width="100px" src="./images/button_left.png"/>
<p class="tile_p">Button three</p>
</td>
</tr>
</table>
</div>
</body>

CSS:

.tile_image {
float: left;
margin: 0px;
}

.tile_image img {
position:absolute;
}

.tile_p {
text-align:center;
position:relative;
}

它的样子: http://img580.imageshack.us/img580/8867/uo7i.png

我希望文本位于按钮的中间而不是按钮下方。

编辑:

好吧,当我使用src="./images/button_left.png" 图片看起来应该是这样的:

http://img580.imageshack.us/img580/8867/uo7i.png

但是每当我使用背景图像时有时候是这样的: http://img580.imageshack.us/img580/6127/yz4.png

最佳答案

表格不应该用于布局。我认为最好的方法是使用这样的 float 链接:

<div class="tile_div">
<a href="#">Button one</a>
<a href="#">Button two</a>
<a href="#" class="last">Button three</a>
<div class="clear"></div>
</div>

CSS:

.tile_div a {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 5px;
background-image: url(./images/button_left.png);
text-align: center;
line-height: 50px;
text-decoration: none;
}

.title_div a.last {
margin-right: 0;
}

.clear {
clear: both;
}

JSFiddle

关于html - 将 CSS/HTML 中的按钮与文本水平对齐一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17629788/

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