输入左对齐，在 div 的中心答案

【问题标题】：Input aligned left, in center of div输入左对齐，在 div 的中心
【发布时间】：2019-06-07 16:21:12
【问题描述】：

我正在尝试将我的输入部分与 div 的中心对齐，标签左对齐在输入的左侧。我似乎无法让输入部分在 div 的中心彼此对齐。请耐心等待，我对任何类型的编码都非常陌生，所以我的代码可能不是最好的。到目前为止，这是我的 html 和 css：这就是我希望它看起来的样子。标签在左侧，输入字段在中间。 IMG

.othercomponent {
   background-color: white;
   height: 30px;
   border-radius: 10px;
   width: 95%;
   margin: 0 auto;
   margin-top: 10px;
   text-indent: 10px;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: medium;
   font-weight: bold;
   display: block;
}

.lpks-input {
   width: 35%;
   display: inline-block;
   padding-right: 5px;
}

<body class="body">
   <div class="othercomponent">Plot Name <input class="lpks-input"></div>
   <div class="othercomponent">Other Name <input class="lpks-input"></div>
</body>

这是一个 JSFiddle 来展示我现在所拥有的： https://jsfiddle.net/h8vo2opv/

【问题讨论】：

能发一张想要的效果图吗？
所以你想要div左边的文本和中间的inputfield？
我会尽快发布一张图片。没错，斯特凡。我想要左边的文本和中间的输入字段。
我更新了我的答案和你的图片不一样。但是标签在左边，文本框在中间。

标签： html css

【解决方案1】：

您可以将width 用于 div。并将 <label> 放置在左侧的文本中，并将样式 float:left; 也为标签和输入部分设置宽度。检查我的代码，这将对您有所帮助。

.othercomponent {
   background-color: white;
height: 30px;
border-radius: 10px;
width:100%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-size: medium; */
font-weight: bold;
display: block;
align-items: center;

background: wheat;
   }
.othercomponent input {
  width: 60%;
  float:left;
  }
.othercomponent lebel {
    float: left;
  width:30%;
}

    .lpks-input {
	width: 35%;
	display: inline-block;
	padding-right: 5px;
    }

<body class="body">
	 <div class="othercomponent"><lebel>Plot Name </lebel><input class="lpks-input"></div>

	 <div class="othercomponent"><lebel>Other Name </lebel><input class="lpks-input"></div>
</body>

【讨论】：

这正是我所需要的！谢谢！
很高兴它对你有用。请考虑接受答案(see How to accept SO answers)

【解决方案2】：

如果我理解得很好 :) 你希望它们位于白色 div 的中心：

HTML：

   <body class="body">
     <div class="othercomponent">
 <span class="left">Plot Name </span> <span class="center"><input class="lpks-input"></span></div>

     <div class="othercomponent">
  <span class="left">Plot Name </span> <span class="center"> <input class="lpks-input"></span></div>

CSS：

    .body {
    background-color: #EDEDED;
}

.othercomponent {
    background-color: white;
    height: 30px;
    border-radius: 10px;
    width: 95%;
    margin: 0 auto;
    margin-top: 10px;
    text-indent: 10px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: small;
  text-align:center;
    font-weight: normal;
    display: block;
}

.lpks-input {
    width: 35%;
    display: inline-block;
    padding-right: 5px;

}
.left{
  float:left;
}

【讨论】：

实际上，我只是想让'输入'在中心，与其他输入左对齐，但标签留在 div 的左侧。不过，谢谢您的回复！
但是如果两个标签的长度不同，输入框会向右移动更远。

【解决方案3】：

您可以添加一些标记，然后将您的form 设置为table。这将根据label 宽度排列inputs。

.form {
  display: table;
}

.othercomponent {
	background-color: white;
	height: 30px;
	border-radius: 10px;
	width: 95%;
	margin: 0 auto;
	margin-top: 10px;
	text-indent: 10px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: medium;
	font-weight: bold;
	/* display: block; */
	display: table-row;
   }

    .lpks-input {
	/* width: 35%; */
	display: inline-block;
	padding-right: 5px;
    }

label,
.input-container {
  display: table-cell;
  vertical-align: middle;
}

<body class="body">
  <form>
	 <div class="othercomponent"><label for="input1">Plot Name</label><div class="input-container"><input id="input1" class="lpks-input"></div></div>

	 <div class="othercomponent"><label for="input2">Other Name</label><div class="input-container"><input id="input2" class="lpks-input"></div></div>
  </form>
</body>

【讨论】：