如何在整个 DIV 中垂直对齐我的元素，而不仅仅是它旁边的元素？答案

【问题标题】：How do I vertically align my element in the entire DIV as opposed to only the element it is next to?如何在整个 DIV 中垂直对齐我的元素，而不仅仅是它旁边的元素？
【发布时间】：2018-07-21 09:03:30
【问题描述】：

我想在我的 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 中垂直对齐，而不仅仅是它旁边的元素？

【问题讨论】：

标签： html css center vertical-alignment

【解决方案1】：

我认为最简单的方法是使用 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/

【讨论】：

它阻止我奖励赏金——它说我必须等待三个小时。无论如何，这就像我想象的那样工作。

【解决方案2】：

您的按钮不是#votingForm div 的直接子元素，因此 align-items: center 永远不会应用于按钮。将按钮移动为#votingForm 的直接子级，以使按钮垂直居中。或者，您可以将 margin-top:1.5rem 添加到按钮以使其居中，而不会弄乱其余样式。希望这会有所帮助。

【讨论】：

我不知道这是否是您想要的——jsfiddle.net/aL47cLpq/1，但至少在 Mac Firefox 上，虽然它居中，但头骨图像与按钮图像重叠。理想情况下，它们应该并排放置。
@Natalia 尝试在头骨上放置一些填充物以将其移动一点。
是否有更跨浏览器的解决方案可以以某种方式告诉一个元素不要与另一个元素重叠？

【解决方案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>

【讨论】：

【解决方案4】：

像这样？

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%; 将使其垂直居中。然后当然你需要添加相对于块容器的位置，以便按钮知道在哪个区域播放

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

【讨论】：

差不多。在你的小提琴中，按钮出现在头骨图像的左侧，但我希望它继续出现在它的右侧，在整个 DIV 中垂直居中。
感谢更新。一件奇怪的事情是在 Mac Firefox 上，骷髅图像与按钮重叠——imgur.com/a/sJxtD。有什么办法可以将这些东西分开？
@Natalia 我不知道你的最终产品应该是什么样子，如果你需要的不仅仅是现在的东西，我建议你问一个不同的问题。你有垂直中心，也许是时候尝试自己打磨它了