-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