在浮动的 div 中垂直对齐元素

15 浏览
0 Comments

在浮动的 div 中垂直对齐元素

我想把内部元素在div中居中对齐，div在容器内向左浮动，我放置了我的代码\n

#page_content
{
    position:relative;
    width:80%;
    height:80px;
    margin:auto;
    border:0px solid #fff;
    overflow:hidden;
}
#page_content_col_left
{
    float:left;
    position:relative;
    width:20%;
    height:100%;    
}
#page_content_col_right
{
    float:left;
    position:relative;
    width:80%;
    height:100%;
    background-color:#fff;
}

\n问题是元素内部不居中显示，只显示在每个div的顶部\n问题可以在这里看到：[链接](http://jsfiddle.net/21hcoLgn/)\n谢谢！

0

1 答案

0 Comments

在浮动的div中垂直对齐元素是一个常见的需求。然而，由于浮动元素会破坏元素的正常流动，导致垂直对齐变得困难。

问题的原因是浮动元素会使其容器的高度塌陷，使得垂直对齐的效果无法实现。这是因为浮动元素被从正常文档流中移出，所以其容器无法正确计算其高度。

解决方法之一是使用CSS的display属性来实现垂直对齐。通过将容器的display属性设置为flex，然后使用align-items属性来垂直对齐元素。例如：

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

这样，容器中的元素将在垂直方向上居中对齐。

另一种解决方法是使用CSS的position属性来实现垂直对齐。通过将容器的position属性设置为relative，然后使用top和transform属性来调整元素的位置。例如：

.container {
  position: relative;
}
.container .element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这样，元素将相对于其容器垂直居中对齐。

通过使用display属性和position属性可以解决在浮动div中垂直对齐元素的问题。这些方法允许开发人员在不依赖于浮动的情况下实现垂直对齐的效果。

0