텍스트를 텍스트 영역에 센터링하는 방법은 무엇입니까?

필자의 "약자 라벨"을 해당 텍스트 필드의 가운데에 정렬하고 싶습니다. 나는 여러 가지 방법을 시도해 왔고, 페이지 중심으로하기 위해 테이블을 사용했습니다. 현재 "display : inline-block;"을 사용하고 있습니다. 및 "세로 정렬 : 중간;" 성공하지 못했습니다. 텍스트를 텍스트 영역에 센터링하는 방법은 무엇입니까?

Image Link

내 HTML 코드 :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>DNA Translator</title> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <script></script> 
    </head> 
    <body> 
     <div> 
      <form> 
       <table valign="center" id="table1"> 
        <tr> 
         <td class="labels">DNA:</td> 
         <td class="spacer"></td> 
         <td><input type="text" name="dna" placeholder="DNA"></td> 
        </tr> 
        <tr> 
         <td class="labels">mRNA:</td> 
         <td class="spacer"></td> 
         <td><input type="text" name="mrna" placeholder="mRNA"></td> 
        </tr> 
        <tr> 
         <td class="labels">tRNA:</td> 
         <td class="spacer"></td> 
         <td><input type="text" name="trna" placeholder="tRNA"></td> 
        </tr> 
        <tr> 
         <td class="labels">Amino Acids:</td> 
         <td class="spacer"></td> 
         <td><input type="text" name="aminoAcids" placeholder="Amino Acids"></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td class="spacer"></td> 
         <td class="button"><button id="button_translate" type="button">Tanslate</button> 
         <button id="button_clear" type="button">Clear</button></td> 
        </tr> 
       </table> 

       <!--<div id="text"> 
        <p>DNA: </p><input type="text" name="dna" placeholder="DNA"><br> 
        <p>mRNA: </p><input type="text" name="mrna" placeholder="mRNA"><br> 
        <p>tRNA: </p><input type="text" name="trna" placeholder="tRNA"><br> 
        <p>Amino Acids: </p><input type="text" name="aminoAcids" placeholder="Amino Acids"><br> 
       </div> 
       <div> 
        <button id="button_translate" type="button">Tanslate</button> 
        <button id="button_clear" type="button">Clear</button> 
       </div>--> 
      </form> 
     </div> 
    </body> 
</html>

내 CSS는 (당신이 볼 수 있듯이 나는 많은 것들을 시도했습니다) :

div.container { 
    width:98%; 
    margin:1%; 
    } 

table#table1 { 
    margin-left:auto; 
    margin-right:auto; 
    /*width:530px;*/ 
    } 

td { 
    height:20px; 
    } 

td.button { 
    height:40px; 
    } 

td.labels { 
    width:89px; 
    display: inline-block; 
    text-align:right; 
    vertical-align: middle; 
    } 

td.spacer { 
    width:15px; 
    } 

#button_translate 
{ 
    opacity: 0.7; 
    display: inline-block; 
    height:35px; 
    width:200px; 
    background-color:#293FE3; 
    font-family:arial; 
    font-weight:bold; 
    color:#ffffff; 
    border-radius: 5px; 
    text-align:center; 
    margin-top:2px; 
    /*display: block;*/ 
    margin: 15px auto; 
} 

#button_clear 
{ 
    opacity: 0.7; 
    display: inline-block; 
    height:35px; 
    width:200px; 
    background-color:#293FE3; 
    font-family:arial; 
    font-weight:bold; 
    color:#ffffff; 
    border-radius: 5px; 
    text-align:center; 
    margin-top:2px; 
    /*display: block;*/ 
    margin: 15px auto; 
} 

input[type="text"] 
{ 
width: 390px; 
display:/*block;*/ inline-block; 
vertical-align:middle; 
height:20px; 
padding:4px 6px; 
margin-bottom:20px; 
font-size:14px; 
line-height:20px; 
color:#555; 
vertical-align:middle; 
-webkit-border-radius:4px; 
-moz-border-radius:4px; 
border-radius:4px 
background-color:#fff; 
border:1px solid #ccc; 
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); 
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); 
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); 
-webkit-transition:border linear .2s,box-shadow linear .2s; 
-moz-transition:border linear .2s,box-shadow linear .2s; 
-o-transition:border linear .2s,box-shadow linear .2s; 
transition:border linear .2s,box-shadow linear .2s 
} 

#text 
{ 
    width: 450px ; 
    margin-top; 800px; 
    margin-left: auto ; 
    margin-right: auto ; 
}

출처

2013-08-09 MacBoss123541

http://jsfiddle.net/d4rLD/ – Shiva

당신은에 패딩을 추가 할 수 있습니다 .labels CSS 속성, 귀하의 경우에는 약 6 픽셀해야합니다!

td.labels { 
    width: 89px; 
    display: inline-block; 
    text-align: right; 
    padding-top: 6px; 
    vertical-align: middle; 
}

또한, 그렇게 간단 할 수있는 일에 대해 너무 많은 요소가 있습니다

DEMO : 확실히 고정http://jsfiddle.net/shannonhochkins/d4rLD/2/

출처

2013-08-09 04:53:58

, 그러나 수직 정렬이 작동하지 않는 것은 이상하게 보입니다. 이 모든 것을 할 수있는 더 깨끗한 방법이 있습니까? 코드가 적 으면 더 낫지? – MacBoss123541

물론 처음부터 테이블을 떼어 내고 양식을 재정렬하십시오. 내 편집보기 –

텍스트를 텍스트 영역에 센터링하는 방법은 무엇입니까?

답변

관련 문제