如何跨浏览器对齐 Bootstrap 列中的元素

Question

我的图像居中（分层）在屏幕的死点中心，图像下方有一个粘性导航。它在 Chrome 中完美运行，但在 IE 或 Firefox 中不完美。

我错过了什么？

这是HTML

<div class="row">
  <div class="eventWrapper">
    <div class="col-md-6">
      <div class="hero">
        <img src="http://via.placeholder.com/300/00f" class="eventHeroImg imgFire">
          <img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
          <img src="http://via.placeholder.com/100/f00" class="eventHeroImg imgChange">
      </div><!--/hero-->
    </div><!--/col-6-->
    <div class="col-md-6">
      <div class="hero">
        <div class="solgan-column">
          <img src="http://via.placeholder.com/300/f00" class="eventHeroImgimgFire">
          <img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
          <img src="http://via.placeholder.com/100/00f" class="eventHeroImg imgChange">          
        </div><!--/slogan-column-->
       </div><!--/hero-->
    </div><!--/col-6-->
  </div><!--/wrapper-->
</div><!--/row-->

<!--
<div class="row">
  <div class="col-md-12">
    <div class="fullwidth_header_scroll">
      <a href="#nav">
        <i class="fas fa-angle-double-down fa-3x centerArrowBottom wow fadeIn" data-wow-delay="1.5s" data-wow-duration="2s"></i>
      </a>
    </div><!--/fullwidth--> 
  </div><!--/12-->
</div><!--/row-->




<ul id="nav">
  <li><a class="active" href="#top">Top</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#sponsorship">something</a></li>
</ul>


<script src="https://wowjs.uk/dist/wow.min.js"></script>
    <script>
     new WOW().init();
    </script>

这是 CSS

html {scroll-behavior: smooth}

body {
  font-size: 16px; margin: 0;
}

ul#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -ms-sticky;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

ul#nav li {
  float: left;
}

ul#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul#nav li a:hover {
  background-color: #111;
}

.active {
  background-color: #000066;
}

.hero {
    height: -webkit-fill-available;
  }

img.eventHeroImg, .solgan-column {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.imgLight {
  z-index: 3;
}
.imgChange {
  z-index: 5;
}

.imgFire {
  z-index: 1;
}



.centerArrowBottom {margin: auto !important;
    color: white;
  vertical-align: baseline;}

.fullwidth_header_scroll {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 30px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;

}

a.fullwidth_header_scroll {scroll-behavior: smooth;}

.centerArrowBottom:hover {
  color: darken(#00f, 10%)
}

.eventWrapper {background-image: url("http://eskipaper.com/images/beach-background-4.jpg");
  background-size: 100%;
    height: -webkit-fill-available;}

.slogan {color: goldenrod; font-weight: bold; text-align: center; font-family: 'Oswald'; font-size: 150%; font-weight: bold; }
.slogan-left {float: left}
.slogan-right {float: right}
.heroEventInfo {font-family: 'Raleway'; font-size: 125%}

Here's my codepen

这是 Chrome（完美）

这是 IE/Firefox（糟透了）

Answer 1

使用 height: 500px 代替 height: -webkit-fill-available; 到 .hero class。并删除了 .eventWrapper 的高度，因为 height: -webkit-fill-available; 仅适用于 chrome firefox 不知道 webkit 是什么。希望这对您有所帮助，并将 clearfix class 添加到 eventWrapper div。谢谢

检查下方 link。 https://codepen.io/Xenio/pen/KEopEv

Answer 2

我添加了评论/修改了代码/请检查那部分我也稍微更改了 html 结构，请检查

body {
  font-size: 16px; margin: 0;
}


ul#nav li {
  float: left;
}

ul#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul#nav li a:hover {
  background-color: #111;
}

.active {
  background-color: #000066;
}

img.eventHeroImg, .solgan-column {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.imgLight {
  z-index: 3;
}
.imgChange {
  z-index: 5;
}

.imgFire {
  z-index: 1;
}
.centerArrowBottom {margin: auto !important;
    color: white;
  vertical-align: baseline;}

.fullwidth_header_scroll {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 30px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
}
a.fullwidth_header_scroll {scroll-behavior: smooth;}

.centerArrowBottom:hover {
  color: darken(#00f, 10%)
}

.slogan {color: goldenrod; font-weight: bold; text-align: center; font-family: 'Oswald'; font-size: 150%; font-weight: bold; }
.slogan-left {float: left}
.slogan-right {float: right}
.heroEventInfo {font-family: 'Raleway'; font-size: 125%}

/*Modified code*/
.hero {
 position: relative;
 height: 300px;
 width: 300px;
 margin: 0 auto;
 top: 100px;
}

ul#nav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 99;
}
.eventWrapper {
 background-image: url("http://eskipaper.com/images/beach-background-4.jpg");
 background-size: 100%;
 height: 100vh;
}
/*Modified code end*/

<div class="eventWrapper"> <!-- Slight change here -->
 <div class="row">
  <div class="col-md-6">
   <div class="hero">
    <img src="http://via.placeholder.com/300/00f" class="eventHeroImg imgFire">
    <img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
    <img src="http://via.placeholder.com/100/f00" class="eventHeroImg imgChange">
   </div><!--/hero-->
  </div>
  <div class="col-md-6">
   <div class="hero">
    <div class="solgan-column">
     <img src="http://via.placeholder.com/300/f00" class="eventHeroImgimgFire">
     <img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
     <img src="http://via.placeholder.com/100/00f" class="eventHeroImg imgChange">          
    </div>
   </div>
  </div>
 </div>
</div>

<ul id="nav">
 <li><a class="active" href="#top">Top</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#sponsorship">something</a></li>
</ul>

Answer 3

这里的问题是因为缺少对 CSS 属性 - fill-available 的跨浏览器支持。您可以在此处查看支持矩阵：https://caniuse.com/#search=fill-available.

您已使用 -webkit-fill-available，只有 Webkit 浏览器 (chrome/safari) 支持。对于 firexfox，它使用 -moz-available.

相反，您可以使用 100vh 将 height 或 min-height 指定为 100% 的屏幕。我相应地修改了代码，它在 chrome 和 firefox 中都可以工作。

请检查codepen link: https://codepen.io/rhythm19/pen/BbrjNV

如何跨浏览器对齐 Bootstrap 列中的元素

How to align elements in Bootstrap columns, across browsers

css

css-position

css-transforms

twitter-bootstrap