Question

我稍后会提取样式。我想学习如何使用直接HTML。

请注意，只要我的复选框是默认大小，我的wrap1 div中的所有内容都在中间垂直对齐。

如果我更改复选框的大小，则vertical-align似乎停止工作。 Here is my JSFiddle。

＆＃13;

<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>

＆＃13;

Answer 1

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

Answer 2

您可以尝试以下几种方法：如果您想垂直对齐复选框，可以尝试设置您的复选框样式：

vertical-align: inherit;

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

vertical-align: -10px;

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

2 个答案: