关于网友提出的“ (html5)怎么让html里复选框后面的文字和复选框保持对齐啊,文字总比复选框低点”问题疑问,本网通过在网上对“ (html5)怎么让html里复选框后面的文字和复选框保持对齐啊,文字总比复选框低点”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:
问题: (html5)怎么让html里复选框后面的文字和复选框保持对齐啊,文字总比复选框低点描述:
我想让这个后面的文字和复选框垂直居中对齐
解决方案1:
啊咧咧?
我看 bootstrap
好像是这么干的。
.checkbox {
// 样式
}
解决方案2:给 加一条 CSS:
vertical-align: middle;
还是不对齐的话就把middle
换成一个长度值
两种思路
绝对定位
用 display: inline-block,使其具有高度后在调节行高
给他们设置下浮动试试
解决方案5:例子
使用 Flexbox
来处理这种问题最方便了:
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: darkgray;
}
.main {
width: 800px;
margin: 100px auto;
}
form {
display: flex;
flex-direction: column;
width: 100%;
height: 100px;
background-color: whitesmoke;
border: 2px solid grey;
margin: 20px auto;
}
p {
font-size: 20px;
font-family: "微软雅黑";
}
.input {
display: flex;
align-items: center;
flex: 1;
padding: 10px;
}
.input > input {
margin: 10px;
}
.input > label {
font-size: 20px;
}