-1
は、私はそれは彼らが非常に不気味中心になり、このコードを使用するときにCSSセンターの画像である奇妙な
.center-block{
margin-left:auto;
margin-right:auto;
}
を使用して、私の画像を中心にしています。ここに私のコードHTML & CSS https://hastebin.com/uzavakecic.xmlがあります。ここには、それが何をしているのかを示すイメージがあります。
基本的な言葉で言えば、私はこれら2つの画像を画面の真ん中にしたいと思っています。
注：ブートストラップ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>
この質問にあなたのコードを追加します。スニペット機能を使用して、実行可能な例を作成します。 –
左と右の余白の代わりに 'margin：0 auto'を追加してみてください –
お互いの上に並んでいるか、またはすぐ隣に置いておきますか？ – basement