[英]How can I make my wrapper <div> vertically centered and responsive?
I would like the images within the scrolling portion of my wrapper to float in the middle of the screen (wide) and enlarge/shrink if the screen changes size. 我希望包装器的滚动部分内的图像浮在屏幕中间(宽),并在屏幕改变大小时放大/缩小。 Currently it sits beneath the header but is well above the footer.
当前,它位于页眉下方,但位于页脚上方。 How can I get it to center vertically?
如何使它垂直居中?
CSS: CSS:
/* main content
------------------------------------------------------------------- */
#wrapper {
float:left;
margin:110px 0 0 0;
padding:0 0 0 250px;
background:#fff;
position:relative;
z-index:2;
border-bottom:solid 20px #fff;
}
.post {
padding:0 5px 0 0;
background:#fff;
height:100%;
}
#wrapper img {
color:#fff;
width:auto;
}
The HTML: HTML:
<!-- section that contains all pics -->
<section id="wrapper">
<article class="post">
<p><img src="img/scroll/001_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/002_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/003_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/004_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/005_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
</section>
<!-- close section -->
Thanks in advance guys! 在此先感谢大家!
If you want to use CSS tables, I would suggest: 如果要使用CSS表,我建议:
.post {
display: table;
}
.post p {
display: table-cell;
vertical-align: middle;
height: inherit; /* may not be needed */
}
The display: table{-cell}
properties are pretty well supported in the newer browsers, so this should do the trick. 较新的浏览器很好地支持
display: table{-cell}
属性,因此可以解决这个问题。
Some solutions come to mind of how to vertically center a div. 我想到了一些如何垂直放置div居中的解决方案。
#wrapper {
float:left; /**REMOVE THIS**/
margin:110px 0 0 0; /** REMOVE THIS **/
padding:0 0 0 250px; /** REMOVE THIS **/
width: 100%; /** ADD THIS **/
height: 100% /** ADD THIS **/
background:#fff;
position:relative; /** REMOVE THIS **/
z-index:2; /** REMOVE THIS **/
border-bottom:solid 20px #fff; /** REMOVE THIS **/
}
#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
background:#fff;
position: absolute;
}
.post {
padding:0 5px 0 0;
background:#fff;
height:100%;
}
#wrapper img {
color:#fff;
width:auto;
}
#content {
position: relative;
width: 60%;
height: 60%;
top: 50%;
left: 50%;
}
HTML HTML
<section id="wrapper">
<div id="content"> <!-- ADD THIS This will be used to position vertically-->
<article class="post">
<p><img src="img/scroll/001_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/002_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/003_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/004_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
<article class="post">
<p><img src="img/scroll/005_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>
There is more that needs to be added to make this better, but this will get you started in the right direction. 需要添加更多内容以使它更好,但这将使您朝正确的方向开始。 http://jsfiddle.net/cornelas/qCa3J/
http://jsfiddle.net/cornelas/qCa3J/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.