Question

以下是我的代码我希望div class="col-md-6 col-md-offset-3">内的所有内容由于某些原因，当我尝试使用Bootstrap text-center类时，它不能正确居中。

这是我的index.html代码。我也使用Bootstrap和谷歌字体。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="bg1">
      <div class="container">
        <div class="row">
        <div class="col-md-6">
          <img class="lgsize" src="logo.gif" alt="Logo">
        </div>
        <div class="col-md-6">


        </div>
      </div>
        <div class="row">
          <div class="pushdown">
          <div class="col-md-6 col-md-offset-3">
          <span class="text-center title">Proto X Media</span>
          <p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
        </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

＆＃13;

这也是我的style.css文件。

＆＃13;

.title {
  font-family: 'Bree Serif', serif;
  font-weight: 800;
  font-size: 500%;
  color: 373d44#;
  text-align: center;
}
.bg1 {
  background-image: url("bg2.jpg");
  background-size: cover;
}
.lgsize {
  width: 150px;
  height: 140px;
}
.pushdown {
  padding-top: 150px;
  padding-bottom: 250px;
}
.menu {
  font-size: 100%
  font-family: 'Bree Serif', serif;
}
a {
  color:inherit;
  text-decoration: none;
}
a:hover {
  background-color: transparent;
  text-decoration: none;
}
.subtext {
  text-align: center;
  font-family: 'Bree Serif', serif;
  font-size: 16px;
}

＆＃13;

非常感谢你们:)！

Answer 1

要对齐的元素必须

display: block /*(or inline-block)*/

另外，把

text-align:center

在父div上并从子女中移除。

需要在bootstrap中对齐文本

1 个答案: