在CSS/HTML中如何使按钮与文本水平对齐且在同一行？

Question

在CSS/HTML中如何使按钮与文本水平对齐且在同一行？

4

我想知道如何将我的按钮水平对齐？此外，我想在这些按钮上添加文本。这是我目前拥有的内容。

HTML body部分：

<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。

- Alex

1

这些"按钮"不应该可点击吗？ - bitWorking

1

它们应该是可点击的，我对HTML和CSS不熟悉。 - Alex

1

请查看我的答案 https://dev59.com/e3TYa4cB1Zd3GeqPuWvv#17629849 - user2568107

2个回答

0

好的，你需要用以下代码替换 img 和 p：

<button style="background: url('./images/button_left.png'); width: 100px; height: 50px; border: 0;">Button one</button>

http://jsfiddle.net/6duRf/

- user2568107

没有帮助太多，因为我现在得到了这个：http://img580.imageshack.us/img580/6127/yz4.png - Alex

你能给我提供一下你正在使用作为背景的图片链接吗？ - user2568107

1

你没有设置背景大小，这里有一个示例：http://jsfiddle.net/6duRf/2/ - user2568107

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bitWorking · Accepted Answer

表格不应该用于布局。我认为最好的方法是使用类似于这样的浮动链接：

<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