Question

我正在学习HTML和CSS，我的定位问题。这是我的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
  <div id="main">
    <header>
      <h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
    </header>
    <nav>
      <p>Bu sitede bulacaklarınız:</p>
      <ul>
        <li>Videolar</li>
        <li>Blog yazıları</li>
        <li>Eğlenceli şeyler...</li>
      </ul>
    </nav>
    <footer>
      <p>Bu sitenin copyright hakları tarafımıza aittir.</p>
    </footer>
  </div>
  </body>
</html>

这是我的CSS代码：

#main{
  text-align: center;
}

我无法对齐我的文字，我该如何使用HTML和CSS？

Answer 1

要使块元素（如div）水平居中，请使用margin: auto;

设置元素的宽度将阻止它伸展到容器的边缘。

然后元素将占用指定的宽度，剩余的空间将在两个边距之间平均分配。

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

Answer 2

.center {
  text-align:center !important
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
  <div id="main" class="center">
    <header>
      <h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
    </header>
    <nav>
      <p>Bu sitede bulacaklarınız:</p>
      <ul>
        <li>Videolar</li>
        <li>Blog yazıları</li>
        <li>Eğlenceli şeyler...</li>
      </ul>
    </nav>
    <footer>
      <p>Bu sitenin copyright hakları tarafımıza aittir.</p>
    </footer>
  </div>
  </body>

最好在申请多个div时使用课程。

我想用css代码集中我的<div>

2 个答案: