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

しかし、background-image を使用するたびに、これが発生します: http://img580.imageshack.us/img580/6127/yz4.png

4

2 に答える 2