Question

我是初学者程序员我正和我的朋友Alex在一个网站上工作，我们实际上都是初学者，我承担了设计登陆页面以完成练习的任务。我想要这些div除了文本中心水平和垂直（或死点）之外什么都没有，我尝试了其他人在这个网站上的其他帖子上建议的一些东西，但似乎没有任何工作。你们其中一位大师能帮助我吗？并提前感谢：D（我应该提到我正在使用带有Bootstrap框架的DW）

这是html ：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--GOOGLE FONT-->
     <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body class="background">
    <div id="nav">
        <ul>
            <li><a href=""> About </a></li>
            <li><a href=""> Sign up </a></li>
        </ul>
    </div> 
    <div id="welcome"> 
        <p>TEXT I WANT CENTERED</p>
    </div>
  <div id="best">
        TEXT I WANT BELOW CENTERED TEXT 
    </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
  </body>
</html>

继承人css ：

@charset "utf-8";
/* CSS Document */
 .background {
     background: url(../img/bg1.jpg) no-repeat 50% 50% fixed;
     margin: 0 auto;
     max-width: 80%;
     min-width: 50%;
     width: 80%;
     height:auto;
     background-size: cover;
     -webkit-background-size: cover;
     -o-background-size: cover;
     -moz-background-size: cover;
 }





 li {
     display: inline;
     letter-spacing: 2px;
     padding-right: 0.5em;
     float: right;
     font-size: 125%;
     font-style:normal;
     font-weight: bold;
     text-transform: uppercase;
     text-decoration:none;
     color:#ffffff;
     text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
 }

 #welcome {
    font-family: 'Montserrat', sans-serif;
    max-width: 90%;
    min-width: 80%;
    height: 50%;
    font-size: 350%;
    font-style:normal;
    font-weight: bold;
    text-transform:uppercase;
    text-decoration:none;
    text-align: center;
    color:#ffffff;
    position: relative;
    text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
    z-index: 9998;
 }

 welcome p {
     width: 300px;
     height: 100px;
     padding: 20px;

 }

 #best {
    font-family: 'Montserrat', sans-serif;
    max-width: 100%;
    min-width: 70%;
    font-size: 200%;
    font-style:normal;
    font-weight: bold;
    text-transform:uppercase;
    text-decoration:none;
    text-align:center;
    color:#ffffff;
    position: relative;
    text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
 }


 p {
     text-align:center;

 }

 a {
     color: #FFFFFF;
 }

 a {
     hover: #2a7315;
     text-decoration: none;
 }

Answer 1

您是否尝试将类文本中心添加到div？

Answer 2

您可以通过不同方式集中元素：

.element {
    display: block;
    margin: 0 auto;
}

或

.parent {
    text-align: center;
}
.child {
    display: inline-block
}

或

.element {
    position: relative/absolute;
    left: 50%;
    margin-left: -20px; (usually minus half size of the element)
}

Answer 3

在您的文件中添加此CSS：

#nav {
  float: left;
  width: 100%;
}

Answer 4

有很多方法可以做你要求的事情，我会针对不同的背景提出不同的方法。

我发现最简单的方法是创建一个这样的类：

.v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

然后只需将它添加到您想要垂直居中的任何内容（div，a，p，span等），然后将文本放在中心，您只需使用text-align：center;

Answer 5

以下代码片段适用于我：

#welcome, #best{
  margin: 0 auto;
}

有关如何将这些div放在页面中心的任何提示？

5 个答案: