Question

我尝试在CSS中实现一些设计，但在确定如何正确对齐此<span>时遇到一些麻烦。

我正在努力实现集中对齐的<input>和<button>元素，但<span>元素绝对位于{{1}的右侧例如：

Required Output

确保<input>不会影响其他元素的对齐非常重要。 <span>和<input> 应始终位于父的中间位置。

如果我只能在CSS中执行此操作会很棒。这就是我到目前为止所做的：

＆＃13;

<button>

＆＃13;

div {
    position: relative;
    text-align: center;
    background: #B7B7B7;
    width: 400px;
}
input {
    padding: 5px;
    margin: 10px 0;
    text-align: center;
    font-size: 1.2em;
    width: auto;
}
.verify {
    display: block;
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 0; /* Not sure how to calculate these? */
    right: 0; /* Input.X + Input.Width + 15px ?? */
}

＆＃13;

其他信息：

只需在Chrome中使用
如果需要，我可以将所有元素设为固定宽度
我可以根据需要进行DOM更改
我不想硬编码<div> <input placeholder="Enter code" maxlength="8" size="8"/><br /> <span class="verify"></span> <button>Register</button> </div>的X / Y坐标...我可能想稍后更改输入/按钮尺寸

Answer 1

使用position: relative和display:inline

将输入和跨度包含在div中

范围.verify将完全定位，将输入元素保留在原始位置（居中对齐）

通过提供top:50%然后margin-top: -10px (half of its height)，它将获得它父母身高的中间位置。

＆＃13;

.wrp {
    position: relative;
    text-align: center;
    background: #B7B7B7;
    width: 400px;
}
.inpWrp {
    display: inline;
    position:relative;
}
input {
    padding: 5px;
    margin: 10px 0;
    text-align: center;
    font-size: 1.2em;
    width: auto;
}
.verify {
    display: block;
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    margin-top: -10px;
    top: 50%; /* Not sure how to calculate these? */
    right: -20px; /* Input.X + Input.Width + 15px ?? */
}

＆＃13;

<div class="wrp">

    <div class="inpWrp">
     <input placeholder="Enter code" maxlength="8" size="8"/>
     <span class="verify"></span>
    </div>        
    <br />
    <button>Register</button>
</div>

＆＃13;

Answer 2

您可以将输入元素包装在span中并使用伪元素:after来创建方块。不需要绝对位置：

div {
  position: relative;
  text-align: center;
  background: #B7B7B7;
  width: 400px;
}
input {
  padding: 5px;
  margin: 10px 0;
  text-align: center;
  font-size: 1.2em;
  width: auto;
  vertical-align: middle;
}
.verify:after {
  content: "";
  width: 20px;
  height: 20px;
  background: red;
  display: inline-block;
  vertical-align: middle;
}

<div>
  <span class="verify">
    <input placeholder="Enter code" maxlength="8" size="8"/>
    </span>
  <br />
  <button>Register</button>
</div>

在@kapantzak评论之后，您可以使用绝对位置，如：

div {
  position: relative;
  text-align: center;
  background: #B7B7B7;
  width: 400px;
}
input {
  padding: 5px;
  margin: 10px 0;
  text-align: center;
  font-size: 1.2em;
  width: auto;
}
.verify:after {
  content: "";
  width: 20px;
  height: 20px;
  background: red;
  display: inline-block;
  position: absolute;
  top: 17px;
}

<div>
  <span class="verify">
    <input placeholder="Enter code" maxlength="8" size="8"/>
    </span>
  <br />
  <button>Register</button>
</div>

Answer 3

试试这个......

adb shell cat /sdcard/D_Permission/foo.txt

.main_container {
    position: relative;
    text-align: center;
    background: #B7B7B7;
    width: 400px;
}
input {
    padding: 5px;
    margin: 10px 0;
    text-align: center;
    font-size: 1.2em;
    width: auto;
}
.verify {
    display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
  position: relative;
  top: 2px;
  left: 10px;
}

将跨度添加到中心对齐元素的侧面

3 个答案: