(HTML，CSS)文本对齐：<div>不工作

Question

我使用文本对齐:中间的三个分区，但它们都是对齐的左边。我被告知，因为这三个元素都是块的，所以它们不会center.However，所以我尝试添加显示:内联块，但是当我检查页面时，它仍然显示了显示:块。

这是我的密码：

<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.0" />
    <title>Document</title>
    <style>
      .Google-logo {
        width: 250px;
      }
      .Google-search-box {
        font-size: 13px;
        padding-left: 15px;
        height: 30px;
        width: 460px;
        border-radius: 15px;
        border-style: solid;
        border-color: rgb(160, 157, 157);
        box-shadow: 0 1px 6px rgb(183, 181, 181);
        margin-top: 15px;
      }
      .div {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <img
        class="Google-logo"
        src="images/Google_2015_logo.svg.png"
        alt="Google logo"
      />
    </div>
    <div>
      <input
        class="Google-search-box"
        type="text"
        placeholder="Search Google or type a URL"
      />
    </div>
    <div>
      <button class="left-button">Google Search</button>
      <button class="right-button">I'm Feeling Lucky</button>
    </div>
  </body>
</html>

Answer 1

您可以通过多种方式来完成它，最简单的第一种方法是编写如下所示的CSS：

div { 
text-align: center
}

如果您想在代码本身中使用内联，请使用HTML ：

<div style="text-align:center">

第三种方式是您试图通过使用类/id来实现的，为此您需要同时更改HTML和代码：

*表示类

HTML:

<div class="center"> </div>

CSS:

.center {
text-align: center,
}

*表示id

HTML:

<div id="center"> </div>

CSS:

#center {
text-align: center,
}

最重要的是，div不是一个类，而是一个HTML标记，所以您的代码无法工作，因为

.div {

text-align: center,

} 

在你的CSS代码中，.象征一个类，而如果你像这样写它，它就会像它把文本中心赋予代码中的所有div一样工作。

div {
text-align: center,
} 

但是我觉得你应该使用类并在div中对文本进行居中，这样它就可以特定于您想要集中文本的div，所以尝试将第二或第三种方式优先于第一种方式。

Answer 2

很简单，

div不是一个类，是一个html元素，所以这样做；

CSS

 div {
        text-align: center;
      }