Question

我正在尝试将输入部分对齐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/

Answer 1

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

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

Answer 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;
}

Answer 3

您可以添加一些标记，然后将form设置为table。这将基于input宽度排列label。

.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>

输入对齐左，在div的中心

3 个答案: