Question

我有一个输入字段，它位于屏幕中间。我还希望在输入字段下面有标签，但是无法弄清楚如何将文本对齐到输入字段的左下角而不是底部中心。我看到的结果是标签向左移动太远。

<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
  <input type="text" name="password" value=""><br>
  <label style="display:block; text-align:left">Password</label>
</div>
</body>
</html>

Answer 1

将宽度设置为输入和标签，并制作标签display:inline:block

<div style="text-align:center">
  <input type="text" name="password" value=""style=" width:150px;"><br>
  <label style="display:inline-block; text-align:left;width:150px;" >Password</label>
</div>

Answer 2

你可以在主div内尝试2个独立的div。具有父div的固定/相对宽度。有点像这样。

<div style="text-align:center;width:120px">
<div><input name="password" type="text" value="" /></div>
<div style="display: block; text-align: left"><label>Password</label></div>
</div>

Answer 3

我只需在标签上添加一个边距权限。

查看jsfiddle

getRestaurantsByLocation

Answer 4

在标签上添加

position: relative;
left: 10%;

将left值更改为使其排列的值。

将输入字段下的文本对齐到输入的左下角

4 个答案: