如何在整个DIV中垂直对齐我的元素，而不是仅将其相邻的元素对齐？

Question

我想在DIV中垂直居中放置一个按钮。 DIV中有几个水平元素-图像，滑块，另一图像和按钮...

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

我以为可以通过使用此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;
}

但是我的按钮似乎与图像的左侧垂直对齐，而不是与整个DIV对齐-https: //jsfiddle.net/aL47cLpq/ 。 如何使按钮在DIV中垂直对齐，而不是仅在其旁边对齐？

Answer 1

您的按钮不是#votingForm div的直接子级，因此align-items：中心永远不会应用于按钮。 将按钮移动为#votingForm的直接子代，以使按钮垂直居中。 另外，您可以在按钮上添加margin-top：1.5rem以使其居中，而不会弄乱其余样式。 希望对您有所帮助。

Answer 2

像这样？

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

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

应用transform: translateY(-50%); top: 50%; 将其垂直居中。 然后，当然，您需要添加相对于积木容器的位置，以便按钮知道要在哪个区域播放

如果您对按钮的设置比较简单，则可以通过其他方式完成

Answer 3

如果您将显示表用于父级div，那么为什么不显示子单元格/表格的表格单元格

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

我认为不要直接在表单上应用此CSS，然后将div应用于表单，然后在包装上应用此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 { 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> 

Answer 4

我认为最简单的方法是使用flexbox。 克里斯·科耶尔（Chris Coyier）已经做了一个非常有用的指南，可以在这里使用它： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

确保所有物品的高度相等：

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

将表单的高度与父项匹配，并使用“ align-items”将按钮对齐：

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

更新的jsfiddle： https ://jsfiddle.net/uL7j2ah4/3/