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

Issue

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?

Solution

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/

Answered By - Antfish

Answer Checked By - Willingham (PHPFixing Volunteer)