垂直对齐一个“挂掉”与其同伴水平对齐的div的元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了垂直对齐一个“挂掉”与其同伴水平对齐的div的元素相关的知识，希望对你有一定的参考价值。
我不知道如何简洁地描述我想用文字实现的内容，所以这是一张ASCII图片：
(+1) | Enter your phone number |
| Enter your name |
我有两个<input>s，一个用于电话号码，一个用于姓名。这些应该水平对齐（在相同的“列”中）。
我还有一个<span>（国家代码，另一条数据必须与电话号码一起输入）。这应该“挂掉”输入到左侧的电话号码。
我想垂直居中国家/地区代码，使其显示在电话号码输入的中间。
看起来CSS Grid可以实现这一点。我想知道：有没有一个不涉及CSS Grid的解决方案？
这是我到目前为止的一个片段。我正在使用“大小为零的位置：相对元素及其内容在一个位置：绝对子”技术从流中排除“国家代码”元素，因此它不会破坏水平对齐。
如您所见，它不会垂直居中国家/地区代码。
input {
height: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.phone-number-input-container {
display: inline-flex;
align-items: center;
}
.name-input-container {
margin-top: 1rem;
}
.country-code-container {
position: relative;
width: 0;
height: 0;
}
.country-code {
position: absolute;
right: 1rem;
}<html>
<body>
<div class='container'>
<div class='phone-number-input-container'>
<span class='country-code-container'>
<b class='country-code'>+1</b>
</span>
<input class='input' placeholder="Phone number"></input>
</div>
<div class='name-input-container '>
<input class='input' placeholder="Name"></input>
</div>
</div>
</body>
</html>答案
你差不多好了，只需在上面的容器上使用position:absolute，只调整左边的值，因为flexbox已经垂直居中（所以不需要设置top）
input {
height: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.phone-number-input-container {
display: inline-flex;
align-items: center;
position:relative;
}
.name-input-container {
margin-top: 1rem;
}
.country-code-container {
position: absolute;
left:-2rem;
}<html>
<body>
<div class='container'>
<div class='phone-number-input-container'>
<span class='country-code-container'>
<b class='country-code'>+1</b>
</span>
<input class='input' placeholder="Phone number">
</div>
<div class='name-input-container '>
<input class='input' placeholder="Name">
</div>
</div>
</body>
</html>另一答案
为什么不用flexbox？网格可能有点过于强壮
.wrapper {
display:flex
}
input {
width:300px
}<div class="wrapper">
<div class="country-code">
(+1)
</div>
<div class="right">
<div class="phone">
<input type="phone" placeholder="Enter your phone numner">
</div>
<div class="name">
<input type="text" placeholder="Enter your name">
</div>
</div>
</div>以上是关于垂直对齐一个“挂掉”与其同伴水平对齐的div的元素的主要内容，如果未能解决你的问题，请参考以下文章