4

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

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

4

2 回答 2

8

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

<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

于 2013-07-13T11:44:07.693 回答
0

好的，你需要用这个交换img和p：

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

http://jsfiddle.net/6duRf/

于 2013-07-13T11:42:24.420 回答