Search code examples
jquerycheckboxvertical-alignment

Vertically align checkbox with text on other divs

I am trying to make a legend for some events and I need to place them in 4 columns and some rows.

I am having some difficulty to align the checkboxes with the text in the other divs. What do I have to change to make it work?

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

Regards, Elio Fernandes

Solution

  • You can add the following properties to your CSS:

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

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

    In this case, your checkbox will be centered vertically and horizontally using margins. Here is the working snippet:

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

    Update (some more ways)

    If you have fixed height of checkbox and its container, you can just hardcode 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>

    If you like Flexbox, here is a Flexbox solution:

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