垂直对齐div内的div

时间：2016-11-23 12:19:38

标签： html css vertical-alignment

我有这个fiddle，我需要将框与＆＃34;整箱＆＃34;对齐。类垂直于中间（或顶部或底部，可以配置）。问题是我一直在互联网上尝试解决方案而且都没有用，我想它是因为我的配置和一些属性覆盖其他属性所以我想要的结果是无法获得的。所以我决定在我的具体案例中提问。

＆＃13;
＆＃13; 
.daliBoxSortableContainer {
  width: 100%;
  height: 236px;
  min-height: 35px;
  text-align: center;
  line-height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0px;
  border-color: rgb(255, 255, 255);
  border-width: 0px;
  border-style: solid;
  opacity: 1;
  background-color: red
}

.wholebox {
  display: inline-block;
  position: relative;
  width: 25%;
  height: auto;
  vertical-align: middle;
  touch-action: none;
  cursor: inherit;
}

.selectedBox {
  background-color: #fff6ec;
  border: 1px dashed black;
  color: #555;
}

.helpersResizable {
  border: 1px solid #777;
  background-color: white;
  z-index: 1;
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: move;
}

.boxStyle {
  width: 100%;
  height: 100%;
  position: relative;
  word-wrap: break-word;
  overflow: visible;
  visibility: visible;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  border-width: 0px;
  border-style: solid;
  border-color: rgb(0, 0, 0);
  border-radius: 0px;
  opacity: 1;
}

.showOverlay {
  width: 100%;
  background: black;
  top: 0;
  bottom: 0;
  position: absolute;
  opacity: 0.4;
}
＆＃13; 
<div class="daliBoxSortableContainer">
  <div style="display: table; width: 100%; height: 100%;">
    <div style="width: 100%; height: 100%; display: table-cell; vertical-align: top;">
      <div style="width: 100%; height: 100%; position: relative;">
        <div class="wholebox selectedBox">
          <div id="resizableContainer" style="visibility: visible;">
            <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div>
            <div>
              <div class="helpersResizable" style="left: -7.5px;  top: -7.5px;"></div>
              <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div>
              <div class="helpersResizable" style="left: -7.5px;  bottom: -7.5px;"></div>
              <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div>
            </div>
          </div>
          <div class="boxStyle">
            <div style="width: 100%; height: 100%;">
              <div style="width: 100%; margin: 0px; height: 100%;">
                <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;">
              </div>
            </div>
          </div>
          <div class="showOverlay" style="visibility: hidden;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

同样重要的是要注意.wholebox可以有position:absolute或相对，具体取决于配置，当绝对时，可以拖动，因此左上和左下属性会发生变化。高度可以是自动的或固定的，具体取决于配置。

我认为可以忽略

#resizableContainer和.showOverlay div，但我将它们包括在内，以防它们的某些属性阻止了我想要的工作

顺便说一句，如果有人知道一本关于CSS的好书及其在属性中的兼容性问题，那么我们非常感激。

非常感谢提前。

6 个答案:

答案 0 :(得分：0)

您有两种选择： 1.使用Javascript根据用户的屏幕大小更改div的位置。 2.使用CSS您必须为给定div的容器分配一些值（绝对位置不可能这样）。

答案 1 :(得分：0)

https://jsfiddle.net/402n2w21/3/

这是你想要实现的目标吗？如果它只是需要将top: 30%添加到CSS文件中的.whole-box类。

答案 2 :(得分：0)

在top上使用.wholebox，在顶部使用0％，在中心使用26％，在底部使用56％。

.daliBoxSortableContainer {
  width: 100%;
  height: 236px;
  min-height: 35px;
  text-align: center;
  line-height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0px;
  border-color: rgb(255, 255, 255);
  border-width: 0px;
  border-style: solid;
  opacity: 1;
  background-color: red
}

.wholebox {
  display: inline-block;
  position: relative;
  width: 25%;
  height: auto;
  vertical-align: middle;
  touch-action: none;
  cursor: inherit;
  /*top: 0%;*/
  top: 26%;
  /*top: 56%;*/
}

.selectedBox {
  background-color: #fff6ec;
  border: 1px dashed black;
  color: #555;
}

.helpersResizable {
  border: 1px solid #777;
  background-color: white;
  z-index: 1;
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: move;
}

.boxStyle {
  width: 100%;
  height: 100%;
  position: relative;
  word-wrap: break-word;
  overflow: visible;
  visibility: visible;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  border-width: 0px;
  border-style: solid;
  border-color: rgb(0, 0, 0);
  border-radius: 0px;
  opacity: 1;
}

.showOverlay {
  width: 100%;
  background: black;
  top: 0;
  bottom: 0;
  position: absolute;
  opacity: 0.4;
}
<div class="daliBoxSortableContainer" data-id="sc-1479897411897" id="sc-1479897411897">
  <div style="display: table; width: 100%; height: 100%;">
    <div style="width: 100%;height: 100%; display: table-cell; vertical-align: top;">
      <div style="width: 100%; height: 100%; position: relative;">
        <div class="wholebox dndsc-1479897411897 selectedBox" id="box-bo-1479897411907" style="">
          <div style="visibility: visible;">
            <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div>
            <div>
              <div class="helpersResizable" style="left: -7.5px;  top: -7.5px;"></div>
              <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div>
              <div class="helpersResizable" style="left: -7.5px;  bottom: -7.5px;"></div>
              <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div>
            </div>
          </div>
          <div class="boxStyle">
            <div style="width: 100%; height: 100%;">
              <div style="width: 100%; margin: 0px; height: 100%;">
                <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;">
              </div>
            </div>
          </div>
          <div class="showOverlay" style="visibility: hidden;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

你可以使用CSS翻译。试试这个：

.selectedBox {
    background-color: #fff6ec;
    border: 1px dashed black;
    color: #555;
    /* --- Added CSS --- */
    transform: translateY(-50%);
    top: 50%;
}

Fiddle

答案 4 :(得分：0)

正如@Sotjin所说，Flexbox是我寻找的方式。

谢谢大家！

答案 5 :(得分：0)

试试这个

<强> demo

<强> CSS 

#container {
    /* essential for alignment */
    height:300px;
    line-height:300px;
    text-align:center;
    /* decoration */
    background:#eee;
}
    #aligned-middle {
        /* essential for alignment */
        vertical-align:middle;
        /* decoration */
        background:#ccc;
        /* perhaps, reapply inherited values, so your content is styled properly */
        line-height:1.5;
        text-align:left;
    }
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
    #container .strut {
        /* parent's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    /* for IE < 8, should be placed in separate stylesheet, via use of conditional comments */
    *display:inline;
    *zoom:1;
}
相关问题
最新问题