将span添加到居中对齐元素的一侧

Question

我正在尝试用CSS实现一些设计，但是在对齐<span>方面遇到了一些困难。

我想要实现<input>和<button>元素居中对齐，而<span>元素则绝对位于<input>的右侧，如下所示：

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

如果可以只使用CSS实现这个效果就太好了。 我目前为止做到了这一点：

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 ?? */
}

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

额外信息：

• 只需在Chrome中运行
• 如有必要，我可以使所有元素固定宽度
• 如有必要，我可以进行DOM更改
• 我不希望为<span>硬编码X / Y坐标...我可能稍后想要更改输入/按钮尺寸

- CodingIntrigue

---

你能把 input 和 span 放在一个额外的 div 中吗？ - Kilian Stinson

@KilianStinson 当然可以。也不介意 DOM 的变化。 - CodingIntrigue

只需将输入和您的span包装在另一个外部span中，并使外部span相对定位即可。 - Ioan

Answer 1

将输入和span包装在一个带有position: relative和display:inline的div中 .verify将被绝对定位，使输入元素保持其原始位置（居中对齐）

通过给予top:50%然后margin-top: -10px (其高度的一半)，它将位于其父元素高度的中间。

.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 ?? */
}

<div class="wrp">

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

- kapantzak

---

非常接近完美！我必须删除 input 和 span.verify 之间的空格，并将 right 值加上 5px，因为中心对齐偏移了 5px。 - CodingIntrigue

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>

- Alex Char

---

不错的想法！但由于新内容的出现，输入框稍微向左移动了一点。 - kapantzak

@kapantzak 感谢您的反馈。请添加第二个版本。 - Alex Char

Answer 3

试试这个...

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

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

- user1846747