Question

我想知道如何水平对齐我的按钮？最重要的是，我想在这些按钮上添加文字。这就是我现在所拥有的。

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

Answer 1

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

<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

Answer 2

好的，您需要与img和p交换：

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

http://jsfiddle.net/6duRf/

将CSS / HTML中的按钮水平对齐w / text一行？

2 个答案: