将CSS/HTML中的按钮与文本水平对齐一行？_Html_Css

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

html css

将CSS/HTML中的按钮与文本水平对齐一行？,html,css,Html,Css,我想知道如何将按钮水平对齐？最重要的是，我想向这些按钮添加文本。这就是我现在拥有的 HTML正文部分： <body> <div class="tile_div"> <table class="tile_table"> <tr> <td> <img class="tile_image" height="50px"

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

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>

它看起来是什么样子：

我希望文本在按钮的中间，而不是在它们下面。

编辑：

好吧，当我使用

src=“./images/button_left.png”

图像的外观与应有的外观相同：

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

但当我使用背景图像时发生这种情况：

好的，您需要用以下方法交换

img

和

：

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

按钮一

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

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

这些“按钮”不应该是可点击的？它们应该是可点击的，我对html和css都是新手。看看我的答案吧，添加了一个JSFIDLE。另外，

行高：50px

？为什么不使用padding top？宽度padding top必须重新计算高度<代码>行高是垂直对齐文本的更好方法。哦，太酷了。嗯，除非需要一个两行标题，但这种设计似乎并不表明这样的灵活性是有意的。我认为最好是删除float并添加display:inline block@riccardopasianoto no我的意思是，使用

内联块

时，您将始终面临元素之间的空白问题。即使是0.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>

.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;
}