1

我希望我的“字段标签”在其相应文本字段的中心对齐。我尝试了许多不同的方法，为了让它在页面上居中，我使用了表格。我目前正在使用“显示：内联块；” 和“垂直对齐：中间；” 没有成功。

图片链接

我的 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 ;
}
4

1 回答 1

1

您可以为您的.labelscss 属性添加填充，在您的情况下，大约 6px 应该可以做到！

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

此外，对于可能如此简单的事情，您有太多的元素：

演示：http: //jsfiddle.net/shannonhochkins/d4rLD/2/

于 2013-08-09T04:53:58.537 回答