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：center永远不会应用于按钮。将按钮移动为#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

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

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

在我看来不要直接在表格申请包装div为形式申请这个css然后在包装上app这个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;
}

将表格的高度与父级匹配，并使用＆＃34; align-items＆＃34;对齐按钮：

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

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

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

4 个答案: