-1
我已经使用这个代码这让他们很古怪集中在使用CSS中心图像是奇怪
.center-block{
margin-left:auto;
margin-right:auto;
}
中心我的形象。这里是我所有的代码HTML & CSS https://hastebin.com/uzavakecic.xml。这是显示它的功能的图像。
把基本的话我想这两个图像是屏幕的确切中间。
注：我使用引导V4，所以我不能使用引导类中心块它自己的。
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>
你的代码添加到这个问题。使用snippet函数并创建一个可运行的示例。 –
尝试添加'保证金：0自动'而不是保证金左右 –
你想要他们在彼此的顶部或并排靠近吗？ – basement