Html 如何将较大的复选框垂直对齐到中间

稍后我将提取样式。我想学习如何使用直接的HTML实现这一点

注意，只要我的复选框是默认大小，我的WRAP1 div内部的所有内容在中间对齐。

如果我更改复选框的大小，则垂直对齐将停止工作

这是一个标题

描述
100

您可以在这里尝试几件事：如果您想垂直对齐复选框，您可以尝试如下设置复选框的样式：

vertical-align: inherit;

这将为您的复选框提供与父元素相同的垂直对齐属性，并将解决您的问题。但是，如果该选项不起作用，请尝试使用垂直对齐：长度属性。这允许您通过px值调整对齐，并且可以采用正数或负数。这可能不是您需要的值，但例如：

vertical-align: -10px;

---

您可以在这里尝试几件事：如果您想垂直对齐您的复选框，您可以尝试如下设置复选框的样式：

vertical-align: inherit;

这将为您的复选框提供与父元素相同的垂直对齐属性，并将解决您的问题。但是，如果该选项不起作用，请尝试使用垂直对齐：长度属性。这允许您通过px值调整对齐，并且可以采用正数或负数。这可能不是您需要的值，但例如：

vertical-align: -10px;

---

最好的方法是诚实地使用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>

.主集装箱{
位置：相对位置；
宽度：500px；
高度：自动；
}
.main\u容器。内容\u列表{
位置：相对位置；
列表样式：无；
宽度：100%；
高度：自动；
}
.主容器.内容列表.内容列{
位置：相对位置；
高度：60px；
}
.柔性网格{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：-moz盒；
柔性包装：包装；
}
.弹性行{
-webkit盒方向：正常；
-莫兹盒方向：正常；
-webkit盒方向：水平；
-moz盒方向：水平；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
}
.柔性柱{
柔性流动：柱；
}
.柔性包装{
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.flex nowrap{
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
}
.柔性电池{
弹性：1；
}
.flex-20{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit flex:120%；
-ms-flex:120%；
弹性：120%；
}
.flex-60{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit flex:160%；
-ms-flex:160%；
弹性：160%；
}
.flex-100{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit flex:1100%；
-ms-flex:1100%；
弹性：1100%；
}
.网格中心{
证明内容：中心；
对齐项目：居中；
}
{{--Nav HTML此处--}

最好的方法是诚实地使用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>

.主集装箱{
位置：相对位置；
宽度：500px；
高度：自动；
}
.main\u容器。内容\u列表{
位置：相对位置；
列表样式：无；
宽度：100%；
高度：自动；
}
.主容器.内容列表.内容列{
位置：相对位置；
高度：60px；
}
.柔性网格{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：-moz盒；
柔性包装：包装；
}
.弹性行{
-webkit盒方向：正常；
-莫兹盒方向：正常；
-webkit盒方向：水平；
-moz盒方向：水平；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
}
.柔性柱{
柔性流动：柱；
}
.柔性包装{
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.flex nowrap{
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
}
.柔性电池{
弹性：1；
}
.flex-20{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit flex:120%；
-ms-flex:120%；
弹性：120%；
}
.flex-60{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit flex:160%；
-ms-flex:160%；
弹性：160%；
}
.flex-100{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit flex:1100%；
-ms-flex:1100%；
弹性：1100%；
}
.网格中心{
证明内容：中心；
对齐项目：居中；
}
{{--Nav HTML此处--}

是否使用

变换：缩放（X）

更改复选框的大小？否！我在html中使用了style=“height:30px；width:30px；”。它在Chrome中不起作用，并且破坏了与其他

div

块的对齐。我想学习