Css 如何将文本居中放置到文本区域？_Css_Forms_Html Table_Alignment_Vertical Alignment

Css 如何将文本居中放置到文本区域？

css forms

Css 如何将文本居中放置到文本区域？,css,forms,html-table,alignment,vertical-alignment,Css,Forms,Html Table,Alignment,Vertical Alignment,我希望我的“feild标签”在其相应文本字段的中心对齐。我尝试了很多不同的方法，为了让它集中在页面上，我使用了表格。我目前正在使用“显示：内联块”和“垂直对齐：中间”；但没有成功我的HTML代码： <!DOCTYPE html> <html> <head> <title>DNA Translator</title> <link rel="stylesheet" type="text/css" href=

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

我的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>

您可以在

.labels

css属性中添加填充，在您的情况下，大约6px就可以了

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

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

演示：

您可以向

添加填充。标签css属性，在您的情况下，大约6px就可以了
td.labels {
    width: 89px;
    display: inline-block;
    text-align: right;
    padding-top: 6px;
    vertical-align: middle;
}

此外，对于可能如此简单的事情，您有太多的元素：
演示：
这确实修复了它，但垂直对齐不起作用似乎很奇怪。有没有更干净的方法来做这一切？代码越少越好，对吗？当然，首先，要抛弃表格，重新安排表单。看我的编辑，它确实修复了它，但是垂直对齐不起作用似乎很奇怪。有没有更干净的方法来做这一切？代码越少越好，对吗？当然，首先，要抛弃表格，重新安排表单。查看我的编辑