我想在我的 DIV 中将一个按钮垂直居中。 DIV 中有几个水平元素 -- 一个图像、一个 slider 、另一个图像和按钮 ...
<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 中垂直对齐,而不是仅与它旁边的元素对齐?
最佳答案
我认为最简单的方法是使用 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/
关于html - 如何在整个 DIV 中垂直对齐我的元素,而不是仅对齐它旁边的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48725373/