Question

我的代码存在的问题是<p>Welcome to my Profile</p>不会居中。我尝试过使用Bootstrap的text-center课程，但它并不理想。我还尝试过多种方法，例如在CSS中使用text-align: center;，甚至在标题和div中都使用width: 100%;。有什么解决方案吗？提前致谢。

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jane's Personal Profile</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="styles.css" rel="stylesheet" type="text/css">

  </head>
  <body>
    <header>
        <h1>Jane Doe</h1>
        <ul>
            <li><a href="#">Social Media</a></li>
            <li><a href="#">Portfolio</a></li>
        </ul>
    </header>
    <div class="row">
        <div class="span8 offset2 text-center">
            <p>Welcome to my Profile</p>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS：

header {
  height: 75px;
  padding-left: 10px;
  box-shadow: 5px 5px 10px grey;
  width: 100%;
}

header > h1 {
 float: left; 
}

ul {
  display: table-row;
  float: right;
  list-style: none;
}

ul > li {
  display: table-cell;
  vertical-align: middle;
  height: 70px;
  padding: 10px;
  padding-right: 20px;
  font-size: 16px;
}

h1 {
  font-family: 'Abril Fatface', cursive;
}

Answer 1

看起来你正在使用“文本中心”作为一个类。除非你将CSS设置为识别类，否则CSS无需做任何事情。

尝试将此添加到您的CSS

.text-center {
  text-align: center;
}

你应该总是为这样的问题提供一个jsFiddle，btw;）

如果Bootstrap有一个类将paragraph元素设置为左对齐，您可能还需要将段落更改为div。或者，您可以在段落中添加一个类，例如“center-me”并添加CSS

p.center-me {
  text-align: center;
}

Bootstrap添加了一大堆CSS。确保在使用Bootstrap时，检查它是否具有影响您要完成的CSS样式。大多数浏览器都包含一个开发人员窗口，您可以在其中查看正在应用于任何窗口的样式。在Chrome中，您可以右键单击任何元素，然后选择“检查”以打开此窗口，同时查看HTML和从任何CSS源应用的样式。

Answer 2

此网页使用的bootstrap版本是较新版本。这个版本停止使用Span和Offset，因此，当与它们配对时，文本中心类就破了。此较新版本使用类似于col-md-x和col-md-offset-x的类。

您只需更改

即可修复代码

<div class="span8 offset2 text-center">

为：

<div class="col-md-8 col-md-offset-2 text-center>

您可以阅读有关引导列here

的更多信息

文本中心不会工作

2 个答案: