gpt4 book ai didi

css - 垂直对齐另一个 div 内的 div,3 行代码不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 11:29:29 25 4
gpt4 key购买 nike

此问题是 this answer to a similar question 的后续问题.我希望它不被认为是重复的,因为我想专注于 "Vertical(ly) align(ing) anything with just 3 lines of CSS" 的特殊技术。 ,并且因为我无法使该技术发挥作用。

这是我的 jsfiddle:http://jsfiddle.net/hf31ofj3/您可能只会在 HTML 5 浏览器中看到此问题,因为其中一个输入是颜色选择器,它的高度与其他输入字段不同,从而导致垂直未对齐。

无论如何,我尝试做的一件事是改变我选择元素垂直对齐的方式,如下所示,但无济于事

#basecfgattrs-row1 #width-input-container
#basecfgattrs-row1 #height-input-container
{
position: relative;
top: 50%;
transform: translateY(-50%);
}

最佳答案

使用 `float 的垂直对齐通常会出现问题。

使用 display:inline-block 代替...与 vertical-align:middle

.input-col3 {
display: inline-block;
vertical-align: middle;
width: 32%;
}
#basecfgattrs input {
width: 44px;
}
#basecfgattrs-row1 {
position: relative;
}
#basecfgattrs-row1 div {}
<div id="basecfgattrs">
<div id="" basecfgattrs-row1 ">
<div class="input-col3 " id="width-input-container ">
<label>Chart Width</label>
<input name="width " id="width " />
</div>
<div class="input-col3 " id="height-input-container ">
<label>Chart Height</label>
<input name="height " id="height " />
</div>
<div class="input-col3 " id="dataSource-chart-bgColor-input-container ">
<label>Background Color</label>
<input name="dataSource-chart-bgColor " id="dataSource-chart-bgColor " type="color " class="colorpicker " />
</div>
</div>
</div>

或者您可以使用flexbox

#basecfgattrs-row1 {
display: flex;
}
.input-col3 {
display: flex;
border: 1px solid red;
width: 32%;
align-items: center;
}
#basecfgattrs label {
flex: 1;
}
#basecfgattrs input {
flex: 0 0 44px;
margin-right: 1em;
}
<div id="basecfgattrs">
<div id="basecfgattrs-row1">
<div class="input-col3" id="width-input-container">
<label>Chart Width</label>
<input name="width" id="width" />
</div>
<div class="input-col3" id="height-input-container">
<label>Chart Height</label>
<input name="height" id="height" />
</div>
<div class="input-col3" id="dataSource-chart-bgColor-input-container">
<label>Background Color</label>
<input name="dataSource-chart-bgColor" id="dataSource-chart-bgColor" type="color" class="colorpicker" />
</div>
</div>
</div>

关于css - 垂直对齐另一个 div 内的 div,3 行代码不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32126898/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com