한 줄에 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

그 아래에 있지 .

편집 : 나는 배경 이미지 을 사용하여 어느 때

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

그러나이 일이 : http://img580.imageshack.us/img580/6127/yz4.png

좋아, 그래서 이미지가 그들이 방법이 보일 것 같습니다 src="./images/button_left.png"를 사용할 때

출처

2013-07-13 Alex

은 "버튼"을 클릭 할 수 안 나는 가장 좋은 방법은이 같은 떴다 링크를 사용하는 것입니다 생각하십니까? – bitWorking

그들은 clickable해야한다, 나는 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'? 패딩 탑을 사용하지 않는 이유는 무엇입니까? – sbichenko

너비 padding-top 높이를 다시 계산해야합니다. 'line-height'는 텍스트를 수직으로 정렬하는 더 좋은 방법입니다. – bitWorking

오, 멋지다. 음, 두 줄짜리 캡션이 필요하지 않은 한,이 디자인은 그런 융통성이 의도 된 것으로 보이지 않는 것 같습니다. – sbichenko

알겠습니다. img과 p 지혜를 교환해야합니다. 시간이 :

<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 much, 내가 지금 이것을 얻고 있기 때문에 http://img580.imageshack.us/img580/6127/yz4.png – Alex

배경으로 사용하고있는 이미지에 대한 링크를 나에게 줄 수 있습니까 –

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

한 줄에 CSS/HTML의 단추를 가로로 텍스트 정렬 하시겠습니까?

답변

관련 문제