[英]Vertical align of different buttons inside a div
我有一个带有一些按钮的栏:
.Languages { position: relative; padding-left: 40px; width: 100%; height: 62px; background-color: turquoise; margin-bottom: 10px; } .Type1 { position: relative; height: 100%; width: 100px; font-size: 18px; margin-right: 10px; line-height: 62px; box-sizing: border-box; background-color: tomato; border: 0; padding: 0; } .Type2 { position: relative; width: 10px; border-bottom: 1px solid green; margin-left: 5px; cursor: pointer; background-color: tomato; border: 0; padding: 0; vertical-align: middle; } .a { height: 5px; } .b { height: 25px; } .c { height: 45px; } .d { height: 60px; }
<div class="Languages"> <button class="Type1" data-id="1">English</button> <button class="Type1" data-id="1">French</button> <button class="Type2 a"></button> <button class="Type2 b"></button> <button class="Type2 c"></button> <button class="Type2 d"></button> </div> <div class="Languages"> <button class="Type1" data-id="1"></button> <button class="Type1" data-id="1"></button> <button class="Type2 a"></button> <button class="Type2 b"></button> <button class="Type2 c"></button> <button class="Type2 d"></button> </div>
第一个按钮填充垂直空间,我希望第二个按钮垂直居中。 但是我不能。
这与按钮内的文本和垂直对齐方式有关,对于文本,按钮具有不同的垂直对齐方式(没有文本时)。
有谁知道如何在不使用flexbox的情况下将第二个文本垂直居中(带有或不带有文本)?
只需添加vertical-align: middle;
所有button
元素:
.Languages { position: relative; padding-left: 40px; width: 100%; height: 62px; background-color: turquoise; } .Type1 { position: relative; height: 100%; width: 100px; font-size: 18px; margin-right: 10px; line-height: 62px; box-sizing: border-box; background-color: tomato; border: 0; padding: 0; } .Type2 { position: relative; width: 10px; border-bottom: 1px solid green; margin-left: 5px; cursor: pointer; background-color: tomato; border: 0; padding: 0; vertical-align: middle; } .a { height: 5px; } .b { height: 25px; } .c { height: 45px; } .d { height: 60px; } button { vertical-align: middle; }
<div class="Languages"> <button class="Type1" data-id="1">English</button> <button class="Type1" data-id="1">French</button> <button class="Type2 a"></button> <button class="Type2 b"></button> <button class="Type2 c"></button> <button class="Type2 d"></button> </div>
将垂直对齐添加到Type1类。
.Type1 {
position: relative;
height: 100%;
width: 100px;
font-size: 18px;
margin-right: 10px;
line-height: 62px;
box-sizing: border-box;
background-color: tomato;
border: 0;
padding: 0;
vertical-align: middle;
}
只需在容器上使用display: flex
:
.Languages {
position: relative;
padding-left: 40px;
width: 100%;
height: 62px;
background-color: turquoise;
/*Use flex and its property align-items to vertical-center*/
display: flex;
align-items: center;
}
我认为这是我最喜欢的flex指南之一。
将以下行添加到类型1类的代码中;
vertical-align: middle;
CSS代码应如下所示;
.Type1 {
position: relative;
height: 100%;
width: 100px;
font-size: 18px;
margin-right: 10px;
line-height: 62px;
box-sizing: border-box;
background-color: tomato;
border: 0;
padding: 0;
vertical-align: middle;
}
.Languages { position: relative; padding-left: 40px; width: 100%; height: 62px; background-color: turquoise; } .Type1 { position: relative; height: 100%; width: 100px; font-size: 18px; margin-right: 10px; line-height: 62px; box-sizing: border-box; background-color: tomato; border: 0; padding: 0; vertical-align: middle; } .Type2 { position: relative; width: 10px; border-bottom: 1px solid green; margin-left: 5px; cursor: pointer; background-color: tomato; border: 0; padding: 0; vertical-align: middle; } .a { height: 5px; } .b { height: 25px; } .c { height: 45px; } .d { height: 60px; }
<div class="Languages"> <button class="Type1" data-id="1">English</button> <button class="Type1" data-id="1">French</button> <button class="Type2 a"></button> <button class="Type2 b"></button> <button class="Type2 c"></button> <button class="Type2 d"></button> </div>
问题是您没有考虑行高。 实际上,我将使用em和%进行所有操作,这是跨平台和多屏幕的解决方案。 这是我的结果(每个具有position:relative;的元素也应具有float:left):
https://jsfiddle.net/525n53y8/
.a {
height: .45em;
margin-top: 1.575em
}
.b {
height: .9em;
margin-top: 1.4em;
}
.c {
height: 1.8em;
margin-top: .9em;
}
.d {
height: 3.6em;
}
每个具有css的元素:“ position:relative;” 还应该有float:left; 那么em和%(请参见小提琴)中的解决方案将适用于块: https : //jsfiddle.net/k3e84v0x/
.a {
height: 5px;
margin-top: 28.5px;
}
.b {
height: 25px;
margin-top: 18.5px;
}
.c {
height: 45px;
margin-top: 8.5px;
}
.d {
height: 62px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.