垂直居中内容时设置一个容器的响应高度

我正试图解决一个问题，即当某个人最小化浏览器窗口时，容器的高度应该是响应的。该容器中的内容也应该保持真实的中心。垂直居中内容时设置一个容器的响应高度

这里是我迄今为止在CodePen：http://codepen.io/anon/pen/PNZzoe

该容器的蓝色框其中包含了一些文字。调整浏览器窗口大小时，蓝色框的高度应与虚拟图像的高度相同。

感谢您的帮助！

守则CodePen：

HTML

<html> 

<head> 
</head> 

<body> 
    <div class="grid_12 alpha omega" id="LLcontentCont"> 

    <!-- Row 1 --> 
    <div class="LLrow" id="LLrow1"> 
     <div class="LLcontent"> 
     <div class="grid_4 LLFR alpha"> 
      <div class="LLtext"> 
      <h3>HEADER</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit tristique sem, dictum ornare lectus.</p> 
      </div> 
     </div> 
     <div class="grid_8 omega"> 
      <a href="" title=""><img src="http://dummyimage.com/868x500/00e1ff/000.gif&text=dummy+image" alt=""></a> 
     </div> 
     </div> 
    </div> 
    <!-- /Row 1 --> 

    <!-- Row 2 --> 
    <div class="LLrow" id="LLrow2"> 
     <div class="LLcontent"> 
     <div class="grid_8 alpha"> 
      <a href="" title=""><img src="http://dummyimage.com/868x500/00e1ff/000.gif&text=dummy+image" alt=""></a> 
     </div> 
     <div class="grid_4 LLFL omega"> 
      <div class="LLtext"> 
      <h3>HEADER</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit tristique sem, dictum ornare lectus.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- /Row 2 --> 
    </div> 
</body> 

</html>

CSS

body { 
    width: 100%; 
    background: #ccc; 
} 

#LLcontentCont {width: 100%;} 

#LLcontentCont, 
.LLrow, 
.grid_4, 
.grid_8 { 
    float: left; 
    display: inline; 
    position: relative; 
} 

.LLrow { 
    width: 100%; 
    margin: 10px 0 0; 
} 

.LLcontent { 
    min-width: 976px; 
    margin: 0 auto; 
    max-width: 1200px; 
    width: 100%; 
} 

.LLcontent .grid_4 { 
    display: table; 
    height: 100%; 
    background: #0091ff; 
    width: 26%; 
} 

.LLcontent .grid_8 { 
    height: 100%; 
    width: 72.3%; 
} 

.LLcontent .grid_8 img { 
    width: 100%; 
} 

.LLtext { 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2016-03-07 user2428993

删除所有其他显示性能，给display: flex;到.LLcontent和.LLcontent .grid_4。而到.LLcontent .grid_4将为你工作。

的CSS：

.LLcontent { 
    min-width: 976px; 
    margin: 0 auto; 
    max-width: 1200px; 
    width: 100%; 
    display: flex; 
} 

.LLcontent .grid_4 { 
    background: #0091ff; 
    width: 26%; 
    display: flex; 
    align-items: center; 
} 

.LLcontent .grid_8 { 
    width: 72.3%; 
} 

.LLcontent .grid_8 img { 
    width: 100%; 
}

Working Fiddle

来源

2016-03-07 05:11:41 ketan

这样的作品，科坦！谢谢您的帮助！ – user2428993

垂直居中内容时设置一个容器的响应高度

回答

相关问题