我正在尝试将输入部分对齐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/
答案 0 :(得分: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;
}
&#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;
答案 1 :(得分:0)
如果我理解得很好:)你想要他们在白色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;
}
答案 2 :(得分:0)
您可以添加一些标记,然后将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>