CODEWITHSUNDEEP
htmlcss
Witnes
Witnes

Reputation: 317

vertical-align doesn't work

I have a following example: https://jsfiddle.net/er322dLL/

.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-input {
    vertical-align: middle;
}
<div class="container alert-info alert">

  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>

</div>

Even if I used vertical-align, my checkbox is still not aligned properly. I found out, that when I add position:relative it works, but still I don't understand why. Can anyone tell me why it's necessary to add this propery. I'm quite new to CSS/HTML and probably don't understand it at all.

Upvotes: 4

Views: 10074

Answers (6)

serraosays
serraosays

Reputation: 7869

vertical-align is a slightly misnamed property and it's only vertically aligning inline elements, not blocks like you're probably expecting.

See this codepen I put together: https://codepen.io/staypuftman/pen/OXzNRj

Broadly, there are two kinds of HTML elements: block-level elements and inline elements. You define them with display: block; and display: inline. Where beginners get confused is that they don't realize every element already has a display orientation defined by the browser.

The elements you are using, like <div>, <section>, etc are predefined as blocks, but some like <label> are inline. So you'd have to first make all of your element inline elements, but you'd find that doesn't work very well either.

The main way to do layouts in 2018 is with flexbox, which controls alignment on two axes very tightly. The main axis is controlled by the justify-content property and the secondary axis is controlled by the align-items property. By default, flexbox is oriented into rows so vertical control is handled with align-items: center; most of the time.

You set the display: flex; and the align-items: center properties on the container which contains the objects you're trying to vertically center. In your case thats <label class="form-check-input">, so the code would be:

.form-check-input {
   display: flex;
   align-items: center;
}

Upvotes: 11

Animesh Kumar
Animesh Kumar

Reputation: 237

See @August's answer for why it didn't work.

Here's a workaround using flexbox 

.form-check-input:checked+span {
    text-decoration: line-through
}

.form-check-label{
   display: flex;
   align-items: center;
}

For further details, refer to Basic Concepts of Flexbox

Upvotes: 1

August
August

Reputation: 2113

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

MDN info about vertical-align

Input is rendered with display: block in this case.

To vertically align block elements you can use one of the multiple solutions available, depending on your case:

a) browser support(flexbox)

b) absolute positioning with negative margins,

etc.

Upvotes: 2

AndrewL64
AndrewL64

Reputation: 16311

The misalignment in @Witnes's fiddle is because of Horizontal alignment, not vertical alignment lol You don't have to add more css to your bootstrap site when there is already a class form-check-inline for that.

Just wrap the label element with a .form-check-inline div like this:

<div class="form-check-inline">
  <label class="form-check-label" style="font-size: 2em;">
    <input class="form-check-input" type="checkbox" style="zoom: 1.5" [checked] = "item.done" (click)="toggleDone()">
     <span>Text</span>
  </label>
</div>

and remove the vertical-inline css that you have added.

You are trying to change the vertical alignment when the horizontal alignment is what you are actually looking for.

form-check is a bootstrap class for vertically centering form elements.

form-check-inline is a bootstrap class for horizontally centering form elements.

jsfiddle: https://jsfiddle.net/er322dLL/2/

Upvotes: 0

Danny
Danny

Reputation: 1113

A simple solution would be add vertical-align all the child elements of your label element:

.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-label * {
    vertical-align: middle;
}
<div class="container alert-info alert">

  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>

</div>

Or you could just target the input and the span:

.form-check-input,
span {
    vertical-align: middle;
}

Upvotes: 0

Luke G.
Luke G.

Reputation: 587

As @August said, that property works in a table-cell, so try something along the lines of this:

.container {
    background-color: #f0f0f0;
    width: 100%;
    display: table;
    height: 150px;
}
.centered-form {
    display: table-cell;
    vertical-align: middle;
}
.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-input {
    /* vertical-align: middle; */
    /* NOTE: I'd use a container so you can more easily keep the label and item together */
}
<div class="container alert-info alert">
  <div class="centered-form">
  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>
  </div>
</div>

Upvotes: 0

Related Questions