如何在 HTML/CSS 中将文本字段与其标题对齐

Question

下面的代码在一列中生成上面的图像：

  <div class="aParent">
      <div>
          <font size="8">Move:</font> 
      </div>
      <div style="float: left;">
          <input type="text" id="moveField"/>
      </div>
  </div>

这里是CSS:

我希望它看起来像这样：

如何水平对齐这两个？以便 "Move" 与文本字段在同一行？

Answer 1

将此添加到您的 .aParent class:

.aParent {
  display: flex;
  align-items: center;
}

您可以更改字体大小以匹配您想要的框的大小。 :)

Answer 2

把它们放在同一个div

<div class="aParent">
      <div style="float: right;">
          <font size="8">Move:</font> <input type="text" id="moveField"/>
      </div>
</div>

Answer 3

如果您希望它们看起来像您的屏幕截图，请使字体大小匹配。此外，font 元素已弃用，请改用 CSS 更改字体大小。

.move, #moveField {
  font-size: 3em;
}

<span class="move">Move:</span> <input type="text" id="moveField" value="text"  >

Answer 4

您可以为输入添加一些填充 div.Example:

<div style="display: flex; flex-direction: row;" class="aParent">
  <div>
      <font size="8">Move:</font> 
  </div>
  <div style="padding-top: 25px;">
      <input type="text" id="moveField"/>
  </div>

希望对您有所帮助。

Answer 5

试试这个 css

.aParent {
    display: table;
}

.div1{
    display: table-cell;
}

.div2 {
    display: table-cell;
    vertical-align: middle;
}

将类添加到您的 div：

 <div class="aParent">
      <div class="div1">
          <font size="8">Move:</font> 
      </div>
      <div class="div2">
          <input type="text" id="moveField"/>
      </div>
 </div>

Answer 6

只需将 display 属性添加到 inline-block 并为输入提供一些高度以使其与文本中间对齐
`

<div class="aParent">
      <div style="display:inline-block">
          <font size="8">Move:</font> 
      </div>
      <div style="display: inline-block;">
          <input type="text" id="moveField"/>
      </div>
  </div>

`

Answer 7

HTML

<div class="aParent">
      <div>
          <font size="6">Move:</font> 
          <input type="text" id="moveField"/>
      </div>
</div>

CSS

#moveField{
      width: 3em;
      height: 3em;
      padding-top: 1em;
      border: 4px solid lightskyblue;
}

如何在 HTML/CSS 中将文本字段与其标题对齐

How to align a text field with its title in HTML/CSS

html

css

text-alignment

HTML

CSS