Question

我希望将div元素与类块和text-center对齐，不仅水平而且垂直。我尝试向其添加margin-top但最终将其父元素#home与其上方的ul分开。您需要在jpeg background #home的{{1}}图片中加上ul的图片（在我的 css 下面加粗）以了解我的意思。我希望显示完整的图像，其顶部正在触摸#home，因为它现在正好，但我还想将<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/> <link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/> <link rel="stylesheet" type="text/css" href="css/porfolioPage.css"/> <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <style> </style> </head> <body> <div class="container-fluid"> <ul id="contents" class="nav nav-pills"> <li> <a href="#" id="productions">In Production</a> </li> <li class="pull-right"> <a href='#'>Contact</a> </li> <li class="pull-right"> <a href='#'>Portfolio</a> </li> <li class="pull-right"> <a href='#'>About</a> </li> <li class="pull-right"> <a href='#'>Home</a> </li> </ul> <div id="home"> <div class="block text-center"> <h1 class="homeHeading">Sandoval Labs Incorporated</h1> <h3 id="homeHeading">Developing</h3> <div class="btnList"> <a class="btn btn-primary" href="#">Twitter</a> <a class="btn btn-primary" href="#">Facebook</a> <a class="btn btn-primary" href="#">Linkedin</a> <a class="btn btn-primary" href="#">Github</a> </div> </div> </div> </div> </body> </html>内的div向下移动而不改变其大小。我怎样才能做到这一点？另请注意我使用的是bootstrap css 模板，因此是类名。

HTML：

body{
    font-family: "avenir";
    font-weight:500;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    **background-image:url(snoopAndZuck.jpg);**
    background-size:cover;
    height:800px;
}

.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;

}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
    }

CSS：

malloc ()

Answer 1

检查出来：

http://codepen.io/xvariant/pen/mVKjzx

＆＃13;

body {
  font-family: "avenir";
  font-weight: 500;
}
.nav-pills {
  font-family: arial;
  font-size: 2.0em;
  background-color: black;
}
#productions {
  font-family: Lobster;
}
#home {
  background: red;
  height: 800px;
}
.btn-primary {
  font-size: 1.7em;
}
h1 {
  font-size: 4em;
}
.homeHeading {
  margin: 0 0 0 0;
  padding: 0px;
}
.block {
  opacity: .7;
  background-color: #000000;
  padding: 10px;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul id="contents" class="nav nav-pills">
    <li>
      <a href="#" id="productions">In Production</a>
    </li>

    <li class="pull-right">
      <a href='#'>Contact</a>
    </li>
    <li class="pull-right">
      <a href='#'>Portfolio</a>
    </li>

    <li class="pull-right">
      <a href='#'>About</a>
    </li>
    <li class="pull-right">
      <a href='#'>Home</a>
    </li>
  </ul>

  <div id="home">
    <div class="block text-center">
      <h1 class="homeHeading">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading">Developing</h3>
      <div class="btnList">
        <a class="btn btn-primary" href="#">Twitter</a>
        <a class="btn btn-primary" href="#">Facebook</a>
        <a class="btn btn-primary" href="#">Linkedin</a>
        <a class="btn btn-primary" href="#">Github</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

您需要在父级div顶部指定距离。然后将孩子div向上移动一半自己的高度。

Answer 2

在不查看代码的情况下，我喜欢使用calc。

来垂直居中div

div {
    width:200px;
    height:200px;
    top:calc(50% - 100px); /* 100px is half the height..*/
    position:absolute;
    background:red;
}

https://jsfiddle.net/foreyez/rLwsv019/

Answer 3

我已经放置了一个CSS风格的空间＆＃34;填充：25px＆＃34;在＆＃34;块＆＃34;开始之前类。

https://jsfiddle.net/sadika/y8h1eLrq/

请告诉我这是否有助于您或我可以帮助您做您想做的事情。

CSS：

<style>
body{
    font-family: "avenir";
    font-weight:500;
      margin:0px;
      padding:0px;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    /*background-image:url(snoopAndZuck.jpg);*/
    background-image: url(http://lorempixel.com/1600/400/nature/); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height:800px;
}
.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;
}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width: 578px) {
    .btnList a {
        margin: 2px 0px;
    }
}
</style>

HTML：

<body>
<div class="container-fluid" style="padding: 0px; margin: 0px;">
    <ul id="contents" class="nav nav-pills">
      <li>
        <a href="#" id="productions">In Production</a>
      </li>

      <li class="pull-right">
         <a href='#'>Contact</a>
      </li>
      <li class="pull-right">
        <a href='#'>Portfolio</a>
      </li>

      <li class="pull-right">
        <a href='#'>About</a>
      </li>
      <li class="pull-right">
         <a href='#'>Home</a>
      </li>
    </ul>

  <div id="home">
    <div style="padding:25px;"></div>
    <div class="block text-center">
      <h1 class="homeHeading" style="color:white;">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading" style="color:white;">Developing</h3>
    <div class="btnList">
      <a class="btn btn-primary" href="#">Twitter</a>
      <a class="btn btn-primary" href="#">Facebook</a>
      <a class="btn btn-primary" href="#">Linkedin</a>
      <a class="btn btn-primary" href="#">Github</a>
    </div>
    </div>
  </div>
  </div>
  <body>

Answer 4

尝试添加到CSS部分：

line-height: XXXpx; (or XXX%)

它适用于文本但它可能适用于div我也从未尝试过......但我祝你好运:)）

如何沿y轴居中div？

4 个答案: