Question

我正在尝试使h1标题“标题”在页面中心对齐，但是由于某些原因，div的宽度不如页面本身。我正在使用Bootstrap CSS和Angular。为什么蓝色div不能命名为maincontent整个页面宽度？

<!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">
  <meta name="description" content="">
  <meta name="author" content="">
</head>
<body id="page-top">
  <!-- Header -->
    <div id="maincontent">  
          <h1 class="name text-center" style="align-content:center">Title</h1>
          <hr class="star-light text-center">
          <span class="skills">x -- x -- x</span>
    </div>
 .....

引导程序是通过将其添加到angular.json导入的：

"styles": [
    "src/my-theme.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "src/app/dragndrop/dragndrop.js"
]

Answer 1

问题必须出在CSS的其他部分。当我在干净的引导CDN上测试您的html时，它工作正常，标题居中。请从下面的代码段开始。一次添加另一个样式表，并确定并修复导致div不能全角的问题。

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
    <div>
        <h1 class="name text-center">Title</h1>
        <hr class="star-light text-center">
        <span class="skills">x -- x -- x</span>
    </div>
</body>
</html>

使用引导程序时，div意外地短于页面宽度

1 个答案: