html – 没有flexbox的垂直居中_html-js-css

概述伙计我正面临一个问题,我正在做的是创建一个具有叠加效果的图像网格,这不仅仅是一个具有绝对位置的容器,当有人悬停在其上时会有一些标题和文字.网格每行只能有3个图像.这一切都很好但我想根据叠加效果的父元素垂直居中标题和段落文本.我知道我可以通过使用flexbox来做到这一点,但我想要浏览器兼容性,这就是为什么我不使用flexbox.我们有没有办法在不使用flexbox的情况下做到这一点？ *,.ro 伙计我正面临一个问题,我正在做的是创建一个具有叠加效果的图像网格,这不仅仅是一个具有绝对位置的容器,当有人悬停在其上时会有一些标题和文字.网格每行只能有3个图像.这一切都很好但我想根据叠加效果的父元素垂直居中标题和段落文本.我知道我可以通过使用flexBox来做到这一点,但我想要浏览器兼容性,这就是为什么我不使用flexBox.我们有没有办法在不使用flexBox的情况下做到这一点？

*,.row,.col {    Box-sizing: border-Box;}body {    Font: 1em/1.5 'Open Sans',sans-serif;    color: #373737;    background: #eaeaea;}h1,h2,h3 {    text-transform: uppercase;}h2 {    Font-size: 1.125em;    color: #4a89ca;    Font-weight: 600;    margin: 0;}h3 {    Font-size: 1.3em;    line-height: 1.25em;    margin-top: .85em;    margin-bottom: .5em;}p {    Font-size: .875em;    line-height: 1.4;    margin: 0 0 1.5em;}.container {    max-wIDth: 1260px;    wIDth: 94.02985075%;    background: #fff;    margin: auto;}.row:before,.row:after {    content: " ";    display: table;}.row:after {    clear: both;}.row {    text-align: center;    margin-bottom: 10px;}.row:last-child {    margin-bottom: 0;}.col {    position: relative;    float: left;    display: block;}.col + .col {    margin-left: 1.6%;}.col-4 {    wIDth: 32.2666666667%;    line-height: 0;    overflow: hIDden;}.col-4 img {    max-wIDth: 100%;    display: block;    background-color: #eaeaea;}.photo-overlay {    position: absolute;    left: 0;    padding-left: 20px;    padding-right: 20px;    top: 0;    bottom: 0;    right: 0;    color: #fff;    background-color: rgba(0,.5);}/* =================================  Photo Overlay Transitions==================================== */.photo-overlay {    opacity: 0;    Transition: opacity .5s;}.photo-overlay:hover {    opacity: 1;}

<body><div > <!-- Start The Container-->    <div ><!-- Start The Row-->        <div >            <img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>        <div >            <img src="http://i.imgur.com/oXvUpY5.jpg" alt="img_2.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>        <div >            <img src="http://i.imgur.com/rmM0h1h.jpg" alt="img_3.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>    </div><!-- End The Row-->    <div ><!-- Start The Row-->        <div >            <img src="http://i.imgur.com/51LBdNS.jpg" alt="img_4.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>        <div >            <img src="http://i.imgur.com/x9EzUS5.jpg" alt="img_5.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>        <div >            <img src="http://i.imgur.com/Y0cIa13.jpg" alt="img_6.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>    </div><!-- End The Row-->    <div ><!-- Start The Row-->        <div >            <img src="http://i.imgur.com/x3qHk2k.jpg" alt="img_7.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>        <div >            <img src="http://i.imgur.com/1cHC3hQ.jpg" alt="img_8.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>        <div >            <img src="http://i.imgur.com/lNNT4Mq.jpg" alt="img_9.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>    </div><!-- End The Row-->    <div ><!-- Start The Row-->        <div >            <img src="http://i.imgur.com/145mdOE.jpg" alt="img_10.jpg">            <div >                <h3>Some Caption</h3>                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>            </div>        </div>    </div> <!-- End The Row--></div> <!-- End The Container--></body>

解决方法是的,您可以使用 CSS positioning properties.将您想要的内容包装在自己的容器中,然后使用position：absolute.

*,.col {  Box-sizing: border-Box;}body {  Font: 1em/1.5 'Open Sans',sans-serif;  color: #373737;  background: #eaeaea;}h1,h3 {  text-transform: uppercase;}h2 {  Font-size: 1.125em;  color: #4a89ca;  Font-weight: 600;  margin: 0;}h3 {  Font-size: 1.3em;  line-height: 1.25em;  margin-top: .85em;  margin-bottom: .5em;}p {  Font-size: .875em;  line-height: 1.4;  margin: 0 0 1.5em;}.container {  max-wIDth: 1260px;  wIDth: 94.02985075%;  background: #fff;  margin: auto;}.row:before,.row:after {  content: " ";  display: table;}.row:after {  clear: both;}.row {  text-align: center;  margin-bottom: 10px;}.row:last-child {  margin-bottom: 0;}.col {  position: relative;  float: left;  display: block;}.col + .col {  margin-left: 1.6%;}.col-4 {  wIDth: 32.2666666667%;  line-height: 0;  overflow: hIDden;}.col-4 img {  max-wIDth: 100%;  display: block;  background-color: #eaeaea;}.photo-overlay {  position: absolute;  left: 0;  padding-left: 20px;  padding-right: 20px;  top: 0;  bottom: 0;  right: 0;  color: #fff;  background-color: rgba(0,.5);}/* =================================  Photo Overlay Transitions==================================== */.photo-overlay {  opacity: 0;  Transition: opacity .5s;}.photo-overlay:hover {  opacity: 1;}/* NEW */.photo-overlay:hover > div {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}

<div >  <div >    <div >      <img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">      <div >        <div><!-- START NEW CONTAINER -->          <h3>Some Caption</h3>          <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dAPIbus,tellus ac cursus commodo</p>        </div><!-- END NEW CONTAINER -->      </div>    </div>  </div></div>

以下是这种定心方法的解释：

> Element will not stay centered,especially when re-sizing screen

这是使用vertical-align和table属性的另一种方法：

> Vertically center two elements within a div

总结

以上是内存溢出为你收集整理的html – 没有flexbox的垂直居中全部内容，希望文章能够帮你解决html – 没有flexbox的垂直居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1058110.html