Как центрировать текст в текстовой области?

Я хотел бы, чтобы мои «метки полей» были выровнены по центру соответствующих текстовых полей. Я пробовал много разных способов, и чтобы расположить его по центру страницы, я использовал таблицы. В настоящее время я использую «display: inline-block;» и "вертикальное выравнивание: посередине"; без успеха.

Ссылка на изображение

Мой 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 ;
}

forms vertical-alignment alignment css html-table
person MacBoss123541    schedule 09.08.2013    source источник
comment
jsfiddle.net/d4rLD   -  person Shiva    schedule 09.08.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете добавить дополнение к своему свойству .labels css, в вашем случае это должно быть около 6px!

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

Кроме того, у вас слишком много элементов для чего-то такого простого:

ДЕМО: http://jsfiddle.net/shannonhochkins/d4rLD/2/< /а>

person Shannon Hochkins    schedule 09.08.2013
comment
Это, конечно, исправило это, но кажется странным, что вертикальное выравнивание не сработало. Есть ли более чистый способ сделать все это? Чем меньше кода, тем лучше, верно? - person MacBoss123541; 09.08.2013
comment
Конечно есть, для начала угробить столы и заново расставить форму. Смотрите мое редактирование - person Shannon Hochkins; 09.08.2013