html - 围绕水平形式设计样式

我创建了一个与顶部标签水平对齐的表单。我在对齐 = 按钮时遇到了一些困难，我使用了的技巧来对齐它。我找不到更好的解决方案，有什么更好的办法吗？

我想在表单周围应用边框并在页面中心对齐。我尝试了几种方法，比如将它放在表格中，或者使用另一个 div 但没有成功。到目前为止，这是我的代码(我没有包含计算脚本):

<!DOCTYPE html>
<html>
<head>
    <title> Calculator</title>  
    <style>
        input, label{
            display:block;
        }
        label{
            text-align:center;
            margin-bottom:4px;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center">Calculator</h1>
        <form name="CL">
            <div style="float:left;margin-right:20px;">
                <label for="N1">X</label>
                <input type="text" name="N1" id="N1">
            </div>
            <div style="float:left;margin-right:20px;">         
                <label for "O">Operator</label> 
                <select type="text" name="O" id="O" style="width:50px">
                <option value="0"> +</option>
                <option value="1">-</option>
                <option value="2">*</option>
                <option value="3">/</option>
                </select>
                </div>
            <div style="float:left;margin-right:20px;">
                <label for="N2">Y</label>
                <input type="text" name="N2" id="N2">
            </div>
            <div style="float:left;">
                <label>&nbsp </label>
                <input type="button" value="=" onclick="calc()">
            </div>
            <div style="float:left;">
                <label for="R">Result</label>
                <input type="text" name="R" id="R">
            </div>
            </div>
        </form>
</body>
</html>

最佳答案

您可以围绕它创建一个包装器 DIV 并使其成为一个 flex 容器，使用以下设置实现水平和垂直居中:

html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  padding: 10px;
  border: 1px solid #ddd;
}

<!DOCTYPE html>
<html>

<head>
  <title> Calculator</title>
  <style>
    input,
    label {
      display: block;
    }
    
    label {
      text-align: center;
      margin-bottom: 4px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h1 style="text-align:center">Calculator</h1>
    <form name="CL">
      <div style="float:left;margin-right:20px;">
        <label for="N1">X</label>
        <input type="text" name="N1" id="N1">
      </div>
      <div style="float:left;margin-right:20px;">
        <label for "O">Operator</label>
        <select type="text" name="O" id="O" style="width:50px">
          <option value="0"> +</option>
          <option value="1">-</option>
          <option value="2">*</option>
          <option value="3">/</option>
        </select>
      </div>
      <div style="float:left;margin-right:20px;">
        <label for="N2">Y</label>
        <input type="text" name="N2" id="N2">
      </div>
      <div style="float:left;">
        <label>&nbsp </label>
        <input type="button" value="=" onclick="calc()">
      </div>
      <div style="float:left;">
        <label for="R">Result</label>
        <input type="text" name="R" id="R">
      </div>
    </form>
  </div>
</body>

</html>

关于html - 围绕水平形式设计样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54052639/

html - 围绕水平形式设计样式

上一篇：html - 我如何在媒体查询中隐藏 HTML 元素？

下一篇：javascript - 如果子 p 标签为空，则隐藏 div block