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

Бих искал моите "етикети на полета" да бъдат подравнени в центъра на съответните им текстови полета. Опитах много различни начини и за да го центрирам на страницата, използвах таблици. В момента използвам "display: inline-block;" и "vertical-align: middle;" без успех.

Връзка към изображение

Моят HTML код:

<!DOCTYPE html>
<html>
    <head>
    <title>DNA Translator</title>
    <link rel="stylesheet" type="text/css" href="/bgstylesheet.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