中文字，文本框，button按钮垂直居中对齐方法

最新推荐文章于 2023-11-21 19:25:10 发布

华洛

最新推荐文章于 2023-11-21 19:25:10 发布

阅读量4w

点赞数 3

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/sdta25196/article/details/76718617

版权

HTML 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

中文字，文本框，button按钮垂直居中对齐方法

文字要包含在label标签中，并设置行高，否则文字会与文本框的顶端对齐。
文本框要设置vertical-align:middle，否则文本框与button顶端对齐。
button中文字垂直居中，要设置高和行高，行高要小于高。


<html>

<head>
  <style type='text/css'>
    label {
      line-height: 20px;
      height: 20px;
    }

    .button {
      font-size: 12px;
      text-align: center;
      padding: 0px;
      vertical-align: middle;
      line-height: 22px;
      margin: 0px;
      Height: 26px;
      Width: 60px;
    }

    .txt {
      border: 1px #6699CC solid;
      height: 20px;
      width: 160px;
      margin: 0px;
      vertical-align: middle;
      font-size: 12px;
      padding: 0px 2px;
      line-height: 16px;
    }
  </style>
</head>

<body>
  div中文字，文本框，button按钮垂直居中对齐方法及的css样式。
  <div class="divPad" style="FONT-SIZE: 12px; HEIGHT: 28px;">
    <label>查询：企业名称</label><input ID="txt_company" type="text" class="txt" />       
    <label>姓名</label><input ID="txt_name" class="txt" Width="80px" type="text" />       
    <input type="button" ID="Button1" value="查找" class="button" />
  </div>
</body>

</html>