输入左对齐，在div的中心
[英]Input aligned left, in center of div
问题描述
我试图将我的输入部分对齐到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/
3 个解决方案
解决方案1
1 已采纳 2016-01-14 18:53:21
您可以将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>
解决方案2
0 2016-01-14 18:53:50
如果我很好理解:)，您希望它们位于白色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;
}
解决方案3
0 2016-01-14 22:34:48
您可以添加一些标记，然后将form样式设置为table 。 这将根据label宽度将input s对齐。
.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 内的内容（例如，图像）？
[英]How to center align content (e.g., image) inside a left aligned div inside a center aligned container?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.