[英]How to vertical-align larger checkbox to middle
稍后将提取样式。 我想学习如何直接使用HTML。
请注意,只要我的复选框是默认大小,wrap1 div内部的所有内容都将垂直对齐在中间。
如果更改复选框的大小,则垂直对齐似乎停止工作。 这是我的JSFiddle 。
<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left"> <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;"> <div id="heading" class="row"> <p style="text-align: center;">This is a title</p> </div> <div class="wrap1" style="vertical-align: middle;"> <div style="width: 15%; line-height: 53px; text-align: center; background-color: yellow; display: inline-block;"> <input type="checkbox" style="height: 30px; width: 30px;"> </div><div style="width: 70%; line-height: 53px; background-color: orange; display: inline-block;"><label>Description</label> </div><div style="width: 15%; line-height: 53px; text-align: center; background-color:green; display: inline-block;"> <label>100</label> </div> </div> </div> </div>
最好的方法是使用CSS flexbox,因为它会自动对齐并对齐中心和垂直方向:
<style type="text/css">
.main__container {
position: relative;
width: 500px;
height: auto;
}
.main__container .content__list {
position: relative;
list-style: none;
width: 100%;
height: auto;
}
.main__container .content__list .content__col {
position: relative;
height: 60px;
}
.flex-grid {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
flex-wrap: wrap;
}
.flex-row {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-column {
flex-flow: column;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-cell {
flex: 1;
}
.flex-20 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 20%;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
}
.flex-60 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 60%;
-ms-flex: 1 1 60%;
flex: 1 1 60%;
}
.flex-100 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.grid-center {
justify-content: center;
align-items: center;
}
</style>
<main class="main__container flex-grid flex-row flex-wrap grid-center ">
<header class="title__container flex-cell flex-100">
{{--Nav HTML here --}}
</header>
<ul class="content__list flex-grid flex-nowrap flex-column grid-center">
<li class="content__col flex-20 one">
<input type="checkbox" style="height: 30px; width: 30px;">
</li>
<li class="content__col flex-60 two"></li>
<li class="content__col flex-20 there"></li>
</ul>
</main>
您可以在此处尝试一些操作:如果要垂直对齐复选框,则可以尝试如下设置样式:
vertical-align: inherit;
这将为您的复选框提供与父元素相同的垂直对齐方式属性,并应解决您的问题。 但是,如果该选项不起作用,请尝试使用vertical-align: length属性。 这使您可以通过px值调整对齐方式,并且可以采用正数或负数。 这可能不是您需要的值,但是例如:
vertical-align: -10px;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.