将复选框与其他div上的文本垂直对齐

Question

我正在尝试为某些事件制作一个图例，我需要将它们放在4列和一些行中。

我很难将复选框与其他div中的文本对齐。我需要做些什么才能让它发挥作用？

.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}            

div.leg-chk{
    vertical-align: bottom;
}

<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>        

此致 埃利奥·费尔南德斯

Answer 1

您可以将以下属性添加到CSS：

input.leg-chk {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

div.leg-chk {
  position: relative;
  height: 14px;
}

在这种情况下，您的复选框将使用边距垂直和水平居中。这是工作片段：

.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}

input.leg-chk {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

div.leg-chk {
  position: relative;
  height: 14px;
}

div.leg-chk{
    vertical-align: bottom;
}

<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>

更新（更多方式）

如果您有固定高度的复选框及其容器，则只需硬编码margins：

input.leg-chk {
  margin: 1px 0;
}

div.leg-chk {
  height: 14px;
}

.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}

input.leg-chk {
  margin: 1px 0;
}

div.leg-chk {
  height: 14px;
}

div.leg-chk{
    vertical-align: bottom;
}

<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>

如果你喜欢Flexbox，这是一个Flexbox解决方案：

.event {
  display: flex;
  flex-direction: row;
}

div.leg-chk {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 22px;
  height: 22px;
  flex-grow: 0;
  padding: 0;
}

input.leg-chk {
  margin-top: 0;
  margin-bottom: 0;
}

.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}

.event {
  display: flex;
  flex-direction: row;
}

div.leg-chk {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 22px;
  height: 22px;
  flex-grow: 0;
  padding-top: 0;
  padding-bottom: 0;
}

input.leg-chk {
  margin-top: 0;
  margin-bottom: 0;
}

div.leg-chk{
    vertical-align: bottom;
}

<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>