Question

我正在尝试在另一个div中设置div。我的问题是如何将红色子div设置为垂直对齐到中间并且具有比父div更小的高度。看我的代码。

html

 <div class="container">
     <div class="sub-wrapper">   //Need this div to be vertical align to middle  
          text here              //and smaller height         
     </div>
     <div class="bottom-wrapper">
         another text       
     </div>
</div>

CSS

.container {
    display: table;
    width: 100%;
    height: 50px;
    background-color: red;
}

.sub-wrapper {
    display: table-cell; //I use table-cell to vertical align to middle
    background-color: red;
    height: 20px; //set 20px but doesn't take effect...
}


.bottom-wrapper {
   display: table-cell;
   width: 40%;
   background-color: blue;
}

https://jsfiddle.net/zccdcmp5/1/

感谢您的帮助！

Answer 1

垂直对齐

您需要添加vertical-align: middle CSS属性才能将文本垂直放置在中间。只需将其添加到.sub-wrapper声明：

.sub-wrapper {
    display: table-cell;
    background-color: red;
    height: 20px;

    vertical-align: middle; // Here it is :)
}

这是an updated JSFiddle。

<强>高度

只要将div渲染为表格单元格，就不能使唯一padding的高度小于其父级（表格）的高度。细胞填满了桌子。

有几种方法可以做到这一点。您可以使用margin，"ip" : { "type" : "string", "index" : "not_analyzed", "norms" : { "enabled" : false }, "fields" : { "ipV4" : { "type":"ip", "store":true} } }或创建带边距的容器。但是，你为什么要这样做呢？

Answer 2

垂直居中的css技巧（你的父母或孩子可能有任何高度）：

position: relative 关于孩子的
position: absolute
top: 50%
-webkit-transform: translateY(-50%)，添加实际使用的其他供应商

尝试此操作时，请务必删除display: table（或表格单元格）。

这将使孩子居中对齐，并且由于绝对位置，其他兄弟姐妹不会在这个居中的孩子下方对齐。表格单元格将强制您最终占用整个空间，您可以添加另一个包装以具有自定义高度。如果不同的高度很重要，我的解决方案可能不那么冗长。

Answer 3

只需执行此操作即可生成vertical-align:middle并将文本设为中心..

<强> CSS

.container {
    display: table;
    width: 100%;
    height: 50px;
    background-color: red;
    text-align:center;
}

.sub-wrapper {
    display: table-cell; 
    vertical-align:middle;
    background-color: red;
    height: 20px;
}


.bottom-wrapper {
   display: table-cell;
   width: 40%;
   background-color: blue;
}

Answer 4

使用display:inline-block将为您提供所需的输出。

检查以下内容：

.container {
    background-color: red;
    display: block;
    height: 50px;
    width: 100%;
}
.sub-wrapper {
    background-color: red;
    border: 1px solid;
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    width: calc(60% - 2px);
}
.bottom-wrapper {
    background-color: blue;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 40%;
}

<div class="container">
        <div class="sub-wrapper">
            text here
        </div><div class="bottom-wrapper">
        </div>
</div>

检查Fiddle Here.

希望它有所帮助。

如何在我的情况下对齐div？

4 个答案: