How do I vertically align my element in the entire DIV as opposed to only the element it is next to?

Question

I want to vertically center a button in my DIV. There are several horizontal elements in the DIV -- an image ,a slider, another image, and the button ...

<div id="votingForm">
        <div id="sliderScaleDiv">
            <div id="halo">
                <img width="75" src="http://www.clker.com/cliparts/B/O/X/F/G/V/angel-halo-with-wings-hi.png" alt="Angel halo">
                <span class="caption">Angel</span>
            </div>
            <div class="fluid">
                <div class="slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content ui-slider-pips"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 22.2222%;"></span><span class="ui-slider-pip ui-slider-pip-first ui-slider-pip-label ui-slider-pip-1" style="left: 0%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="1">1</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-2" style="left: 11.1111%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="2">2</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-3 ui-slider-pip-initial ui-slider-pip-selected" style="left: 22.2222%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="3">3</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-4" style="left: 33.3333%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="4">4</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-5" style="left: 44.4444%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="5">5</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-6" style="left: 55.5556%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="6">6</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-7" style="left: 66.6667%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="7">7</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-8" style="left: 77.7778%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="8">8</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-9" style="left: 88.8889%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="9">9</span></span><span class="ui-slider-pip ui-slider-pip-last ui-slider-pip-label ui-slider-pip-10" style="left: 100%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="10">10</span></span></div> 
            </div>
            <div id="skull">
                <img width="75" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Skull_and_crossbones.svg/2000px-Skull_and_crossbones.svg.png" alt="Skull">
                <span class="caption">Devil</span>
            </div>

            <form class="voteForm" id="edit_vote_16" action="/votes/16" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="QEDnhWcF8KbI+D0WGuPB8b6a7Et8RO43PMAVI4sonn6JVR8P0nCVeVoE8YAc4bVqEXeYWsSPagfA8V8m+ONNsw==">
                <input type="hidden" value="16" name="vote[id]" id="vote_id">
                <input value="43" type="hidden" name="vote[person_id]" id="vote_person_id">
                <input type="hidden" value="3" name="vote[score]" id="vote_score">
                <button name="next" type="button" id="nextButton" class="btn-feedback">Next</button>
</form>
        </div>

    </div>

I thought I could pull this off by using this CSS

#votingForm {
        width: 100%;
        display: flex;
        align-items: center;
        background-color: red;
}

#sliderScaleDiv {
        display: table;
        width: 95%;
}

#halo {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
  font-family: 'kingthings_petrockregular';
}

@media only screen and (max-width: 500px) {
        #halo {
                display:none;
        }
}

.fluid {
        display: table-cell;
        width: 100%;
}

.slider {
        margin: 25px 10px;
        cursor: pointer;
}

#skull {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
  color: orange;
  font-family: 'char_bbregular';
}


#nextButton {
    display: inline-block;
}

.caption {
        display: block;
}

.voteForm {
        width: 5%;
        display: inline-block;
        padding: 10px;
        background-color: orange;
}

but my button seems to be vertically aligning with the image to its left as opposed to the entire DIV --https://jsfiddle.net/aL47cLpq/ . How do I get the button to vertically align in the DIV as opposed to just the element it is next to?

Answer 1

I think the easiest way of doing this is with flexbox. Chris Coyier has done a really useful guide to using this here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Make sure all items have equal height:

#sliderScaleDiv {
    display: flex;
    align-items: stretch;
}

Matches height of form to parent and aligns the button using "align-items":

.voteForm {
    display: flex;
    align-items: center;
}

Updated jsfiddle: https://jsfiddle.net/uL7j2ah4/3/

Answer 2

Your button is not the direct child of the #votingForm div and so align-items: center is never being applied to the button. Move the button to be the direct child of #votingForm in order to vertically center the button. Alternatively you can add margin-top:1.5rem to the button to center it without messing up the rest of your styles. Hope thats helpful.

Answer 3

Like this?

https://jsfiddle.net/aL47cLpq/3/

#nextButton {
    display: inline-block;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    right: 0;
}
#votingForm {
    ...
    position: relative; // added
}

Applying transform: translateY(-50%); and top: 50%; will center it vertically. Then of course you need to add position relative to the block container so the button knows in what area to play in

If your setup for the button was simpler, this could be done in other ways

Answer 4

if you using display table for parent div then why not display table-cell for child/form

.voteForm {
    padding: 10px;
    background-color: orange;
    vertical-align: middle;
    display: table-cell;
  }

in my opinion do not apply this css directly at form apply wrapper div for form then applay this css at wrapper
i hope this make sense
Thanks

  #votingForm {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: red;
  }

  #sliderScaleDiv {
    display: table;
    width: 95%;
  }

  #halo {
    position: relative;
    z-index: 20;
    vertical-align: top;
    display: inline-block;
    width: 75px;
    display: table-cell;
    font-family: 'kingthings_petrockregular';
  }

  @media only screen and (max-width: 500px) {
    #halo {
      display:none;
    }
  }

  .fluid {
    display: table-cell;
    width: 100%;
  }

  .slider {
    margin: 25px 10px;
    cursor: pointer;
  }

  #skull {
    position: relative;
    z-index: 20;
    vertical-align: top;
    display: inline-block;
    width: 75px;
    display: table-cell;
    color: orange;
    font-family: 'char_bbregular';
  }


  #nextButton {
    display: inline-block;
  }

  .caption {
    display: block;
  }

  .voteForm {
    padding: 10px;
    background-color: orange;
    vertical-align: middle;
    display: table-cell;
  }

<div id="votingForm">
  <div id="sliderScaleDiv">
    <div id="halo">
      <img width="75" src="http://www.clker.com/cliparts/B/O/X/F/G/V/angel-halo-with-wings-hi.png" alt="Angel halo">
      <span class="caption">Angel</span>
    </div>
    <div class="fluid">
      <div class="slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content ui-slider-pips"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 22.2222%;"></span><span class="ui-slider-pip ui-slider-pip-first ui-slider-pip-label ui-slider-pip-1" style="left: 0%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="1">1</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-2" style="left: 11.1111%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="2">2</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-3 ui-slider-pip-initial ui-slider-pip-selected" style="left: 22.2222%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="3">3</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-4" style="left: 33.3333%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="4">4</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-5" style="left: 44.4444%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="5">5</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-6" style="left: 55.5556%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="6">6</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-7" style="left: 66.6667%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="7">7</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-8" style="left: 77.7778%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="8">8</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-9" style="left: 88.8889%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="9">9</span></span><span class="ui-slider-pip ui-slider-pip-last ui-slider-pip-label ui-slider-pip-10" style="left: 100%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="10">10</span></span></div>
    </div>
    <div id="skull">
      <img width="75" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Skull_and_crossbones.svg/2000px-Skull_and_crossbones.svg.png" alt="Skull">
      <span class="caption">Devil</span>
    </div>

    <form class="voteForm" id="edit_vote_16" action="/votes/16" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="QEDnhWcF8KbI+D0WGuPB8b6a7Et8RO43PMAVI4sonn6JVR8P0nCVeVoE8YAc4bVqEXeYWsSPagfA8V8m+ONNsw==">
      <input type="hidden" value="16" name="vote[id]" id="vote_id">
      <input value="43" type="hidden" name="vote[person_id]" id="vote_person_id">
      <input type="hidden" value="3" name="vote[score]" id="vote_score">
      <button name="next" type="button" id="nextButton" class="btn-feedback">Next</button>
    </form>
  </div>

</div>