將CSS/HTML中的按鈕與文本水平對齊在一行中對齊？

我想知道如何水平對齊我的按鈕？最重要的是，我想添加文本到這些按鈕。這是我目前擁有的。將CSS/HTML中的按鈕與文本水平對齊在一行中對齊？

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

來源

2013-07-13 Alex

「按鈕」不應該點擊？ – bitWorking

他們應該是可點擊的，我是新的HTML＆CSS。 – Alex

看看我的答案http://stackoverflow.com/questions/17629788/aligning-buttons-in-css-html-in-one-line-horizontally-w-text/17629849#17629849 – 2013-07-13 11:49:01

表不應該被用於佈局。我認爲最好的辦法是使用鏈接抹灰像這樣：

<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-13 11:44:07 bitWorking

添加了一個JSFiddle。另外，'line-height：50px'？爲什麼不使用填充頂部？ – sbichenko

width padding-top必須重新計算高度。「行高」是垂直對齊文本的更好方法。 – bitWorking

哦，很酷。那麼，除非需要雙線標題，但這種設計似乎並不表明這種靈活性是有意的。 – sbichenko

好的，你需要交換img和p機智h此：

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

http://jsfiddle.net/6duRf/

來源

2013-07-13 11:42:24

Didnt help as much，正如我現在得到這個http://img580.imageshack.us/img580/6127/yz4.png – Alex

你可以給我一個鏈接到你用作背景的圖像 – 2013-07-13 13:14:39

http://img163.imageshack.us /img163/8955/fjeb.png – Alex

將CSS/HTML中的按鈕與文本水平對齊在一行中對齊？

回答

相關問題