0

如何将具有绝对位置且高度 = 100px 的 div 垂直居中在另一个具有相对位置但不具有标准高度的 div 上（取决于图像大小）。

通常你会使用 top:50%;

它会将其与中心对齐，但不会考虑 100px 的 div 的高度，因此它看起来完全不在具有例如 250px 高度的图像的中心。

HTML

  <div class="imgArea">
    <div class="img">
      <img class="img-responsive" src="http://img2.demotywatoryfb.pl//uploads/201311/1384452727_cipnyk_600.jpg" alt="img">
      <div class="btn-panel">
        <button type="button" class="btn btn-default btn-lg imgBtnLeft">
          <span class="glyphicon glyphicon-chevron-left"></span> Prev
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnRight">
           Next <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnLeft">
          <span class="glyphicon glyphicon-thumbs-down"></span> Słabe
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnRight">
           Mocne <span class="glyphicon glyphicon-thumbs-up"></span>
        </button>
      </div>
    </div>
    <p>Tutaj opis do zdjęcia który mówi wszystko!</p>
  </div>

CSS

.imgArea {
  max-width: 800px;
  padding-bottom: 100px; }

.img {
  position: relative; }
  .img .btn-panel {
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 999; }

.imgBtnLeft {
  float: left;
  color: black;
  clear: left; }

.imgBtnRight {
  float: right;
  color: black;
  clear: right; }
4

2 回答 2

1

您可以使用此 css 规则。元素的宽度和高度无关紧要；它将在屏幕上居中。

.centerDiv {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
于 2013-11-15T05:22:49.307 回答
0

我刚刚解决了。抱歉打扰各位了。

.img {
  position: relative; }
.img .btn-panel {
    position: absolute;
    margin-top:-50px; //did the job when combined with top 50%
    top: 50%;
    width: 100%;
    z-index: 999; }

作品！

于 2013-11-15T05:36:03.883 回答