Выравнивание кнопок в 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

Я хочу, чтобы текст был в середине кнопок не ниже их ,

EDIT:

Хорошо так, когда я использую 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 –

таблицы не должны использоваться для разметки. Я думаю, что лучший подход был бы использовать плавали ссылки, как это:

<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'? Почему бы не использовать padding-top? – sbichenko

width padding-top высота должна быть пересчитана. 'line-height' - лучший способ выровнять текст по вертикали. – bitWorking

О, круто. Ну, если не требуется двухстрочный заголовок, но этот дизайн, похоже, не указывает на то, что такая гибкость предназначена. – sbichenko

Хорошо, вам нужно обменять img и p wit ч это:

<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

Не помогло, как я получаю это сейчас http://img580.imageshack.us/img580/6127/yz4.png – Alex

вы можете дать мне ссылку на изображения, которые вы используете в качестве фона –

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

Выравнивание кнопок в CSS/HTML в одной строке по горизонтали с текстом?

ответ

Смежные вопросы