中心形象很奇怪

时间：2017-08-02 17:57:41

标签： css html5 twitter-bootstrap twitter-bootstrap-4

我使用CSS

对中图像 
.center-block{
margin-left:auto; 
margin-right:auto;
}

使用此代码时，它们非常奇怪地居中。这是我的所有代码HTML＆amp; CSS https://hastebin.com/uzavakecic.xml。这是显示它的作用的图像。

要输入基本单词，我希望这两个图像完全位于屏幕中间。

注意：我使用bootstrap V4，所以我不能使用自己的bootstrap类中心块。

https://gyazo.com/6b0846f84f5fb064ca4dce5ed701e470

感谢您阅读此内容，詹姆斯。

body {
  margin: 0;
  background: #000;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('../images/backgroundimage.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

.fourms {
  padding-right: 0px;
  margin-left: 0px;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Portal</title>

  <!--Bootstrap4 JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

  <!--Bootstrap4-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!--Styles-->
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <!--FontAwesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  <!--Font-->
  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />

  <!--Animate.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

  <!--Jquery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">

    <!-- FullScreen Video Using HTML5-->
    <div class="fullscreen-bg">
      <video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
                    <source src="images/backgroundvideo.webm" type="video/webm">
                    <source src="images/backgroundvideo.mp4" type="video/mp4">
                    <source src="images/backgroundvideo.ogv" type="video/ogg">
                </video>
    </div>

    <!--Epic Audio Background Using HTML5-->
    <audio autoplay loop id="myaudio">
                <source src="audio/epicaudio.mp3" type="audio/mpeg">
            </audio>


    <div class="row icons">

      <!--Fourms Icon-->
      <div class="center-block">
        <div class="col-xs-4">
          <a href="fourms"><img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;"></a>
        </div>
      </div>

      <div class="center-block">
        <div class="col-xs-4">
          <a href="fourms"><img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;"></a>
        </div>
      </div>


    </div>


  </div>


  <!--JavaScript for lowering Volume in EpicAudio-->
  <script>
    var audio = document.getElementById("myaudio");
    audio.volume = 0.1;
  </script>

</body>

</html>

1 个答案:

答案 0 :(得分：1)

您可以使用.justify-content-center上的.row辅助类来让孩子们居中。

body {
  margin: 0;
  background: #000;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('../images/backgroundimage.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

.fourms {
  padding-right: 0px;
  margin-left: 0px;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Portal</title>

  <!--Bootstrap4 JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

  <!--Bootstrap4-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!--Styles-->
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <!--FontAwesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  <!--Font-->
  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />

  <!--Animate.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

  <!--Jquery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">

    <!-- FullScreen Video Using HTML5-->
    <div class="fullscreen-bg">
      <video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
                    <source src="images/backgroundvideo.webm" type="video/webm">
                    <source src="images/backgroundvideo.mp4" type="video/mp4">
                    <source src="images/backgroundvideo.ogv" type="video/ogg">
                </video>
    </div>

    <!--Epic Audio Background Using HTML5-->
    <audio autoplay loop id="myaudio">
                <source src="audio/epicaudio.mp3" type="audio/mpeg">
            </audio>


    <div class="row icons justify-content-center">
      <!--Fourms Icon-->
      <a href="fourms"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Fourms" style="width:142px;height:142px;border:0;"></a>
      <a href="fourms"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Fourms" style="width:142px;height:142px;border:0;"></a>
    </div>


  </div>


  <!--JavaScript for lowering Volume in EpicAudio-->
  <script>
    var audio = document.getElementById("myaudio");
    audio.volume = 0.1;
  </script>

</body>

</html>

相关问题
最新问题