垂直中心內部的div

這裏的每一個元素是我的問題垂直中心內部的div

http://www.bootply.com/tkrs6G3GlG

基本上，我在左邊表格組得到的實例演示，並在每個我有很大的文本提供了一些信息和然後要求用戶選擇一些東西（例如只有收音機，但也有下拉和複選框）。我希望對於每個表單組，右側的選項根據文本大小垂直對齊（在中間）。在上面的例子中，收音機位於頂部，但我希望它們位於相應的表單組中。

我已經試過

.vcenter{vertical-align:middle; 
    }

，但它不工作。我也試過設置包含選項的div的高度

.maxHeight{ 
     height:100%; 
}

但是div沒有變大。我嘗試使用大高度並隱藏溢出，但不工作。只有到目前爲止工作的事情是使用

.vcenter{ 
     position:absolute; 
     vertical-align: middle; 
}

但它只是看上去有大屏幕，但屏幕大小調整後，它與文字overlaping。

來源

2015-11-20 Error

的可能的複製[如何垂直居中一個div所有的瀏覽器？（http://stackoverflow.com/questions/396145/how-to-vertically -center-a-div-for-all-browsers） – jperezov

嘗試將'margin'設置爲'auto'並給出'div'的寬度，查看答案 –

如果您div是另一個DIV中，嘗試

#my_div{ 
     margin-left: auto; 
     margin-right: auto; 
     width: /*put_your_width*/; 
}

而如果它是parent div

#my_div{ 
     display: table; 
     margin-right: auto; 
     margin-left: auto; 
    }

來源

2015-11-20 00:18:25

有幾個方法可以做到這一點。我通常用這個方法...

HTML

<div> <p>Center this text</p> </div>

CSS

div{  
    position: relative; 
    height: 500px; 
    width: 500px; 
    background: green; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
p{ 
    position: absolute; 
    top:50%; 
    text-align:center; 
    display:inline-block; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

來源

2015-11-20 00:18:30 magreenberg

我喜歡做的就是添加margin: auto;和頂部，左側方式，右側和底部0，像這樣：

.parent { 
    position: relative; 
} 

.child { 
    margin: auto; 
    position: absolute; 
     top: 0; right: 0; bottom: 0; left: 0; 
}

來源

2015-11-20 01:49:41

您可以使用許多方法。

第一個是與

位置

.parent_div{ 
      position:relative; 
      width:500px; 
      height:500px; 
    } 
    .children_div{ 
      position:absolute; 
      width:100px; 
      height:100px; 
      left:0px; 
      right:0px; 
      top:0px; 
      bottom:0px; 
      margin:auto; 
    }

- 但是你需要指定的高度和子元素的寬度..所以這是不好的流體設計。

Sec。的aproach是最好的，我認爲它使用顯示:)

.parent_div{ 
      display:table; 
      width:500px; 
      height:500px; 
      text-align:center; 
    } 
    .children_div{ 
      display:table-cell; 
      width:100%; 
      height:100%; 
      vertical-align:middle; 

    } 

    .children_children_div{ 
      /*What ever... this div will be centered verticaly*/ 

    }

來源

2015-11-20 10:34:50

垂直中心內部的div

回答

相關問題