Question

第一次来这里轻松一点！

我对HTML和CSS一般都很陌生，我正在尝试为我正在处理的网络应用项目创建一种着陆页。

我们的想法是让HTML5视频在后台播放全屏（已实现），图片位于页面中央，以便用户继续操作。

图像居中是我失败的地方。我可以将图像置于水平轴的中心，而不是垂直轴，并且一直在尝试。

有关如何集中图片的任何想法，例如http://aberrocreative.com/或此http://www.ridebarstow.com/ ??

视频：

    <video id="video_background" loop autoplay  preload="auto" poster="/images/department.jpg">
    <source src="videos/department1.mp4" type="video/mp4"/>
    <source src="videos/department1.ogv" type="video/ogv"/>
    <source src="videos/department1.webm" type="video/webm"/>
    <p>Sorry! It seems your browser doesn't support HTML5 video :( </p>
</video>

#video_background
{
position: fixed;
top: 0;
bottom: 0;
left:0;
right:0;
z-index: -1000;

图像：

<div id="welcome_image">
    <img src="images/welcome.png" alt="Electronics at York"/>
</div>

#welcome_image {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: inline-axis;
-moz-box-orient: inline-axis;
box-orient: inline-axis;

-webkit-box-align: end;
-moz-box-align: end;
box-align: end;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
z-index: 100;}

图像样式只是我尝试过的最新方法。我迷路了！

对于代码垃圾邮件和长度也感到抱歉！

谢谢，尼克

Answer 1

如果父母有 display：flex; ，则子项将使用 margin：auto; 水平和垂直居中。为了清楚起见，孩子在父母而不是屏幕中居中，因此使用这种特殊方法，父母需要填充屏幕，如果这是您希望孩子居中的方式。有更多方法可以使元素居中，但这是我最近使用过的。

#background{
  display:flex;
  position:fixed;
  width:100vw;
  left:0px;
  height:100vh;
  top:0px;
}

#center{
  margin:auto;
}

<div id='background'>
  <div id='center'>Here we go.</div>
</div>

使用CSS3将图像置于HTML5视频背景上

1 个答案: