(HTML, CSS) text-align : center 不工作<div>

Question

I used text-align:center to center the three divisions, but they are all aligned on the left.我使用 text-align:center 将三个分区居中，但它们都在左侧对齐。 I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.有人告诉我，因为这三个元素都是块状的，所以它们不会居中。但是，我尝试添加 display:inline-block，但是当我检查页面时，它仍然显示 display:block。

Here's my code:这是我的代码：

<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

Very simple,很简单，

div is not a class, is a html element, so do this; div不是一个类，是一个 html 元素，所以这样做；

CSS CSS

 div {
        text-align: center;
      }

Answer 2

You can do it in multiple ways, the simplest and the first way is to write a CSS like:你可以通过多种方式做到这一点，最简单也是第一种方式是编写一个 CSS，如：

div { 
text-align: center
}

The second way if you want to use a inline CSS in your HTML code itself:如果您想在 HTML 代码本身中使用内联 CSS，则第二种方法是：

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

The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:第三种方法是您尝试使用 classes/id 来做的事情，因为您需要更改 HTML 和 CSS 代码：

* for class *上课

HTML: HTML：

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

CSS: CSS：

.center {
text-align: center,
}

* for id *用于身份证

HTML: HTML：

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

CSS: CSS：

#center {
text-align: center,
}

And most importantly div is not a class it's an HTML tag so your code didn't work because you used最重要的是 div 不是一个类，它是一个 HTML 标签，所以你的代码不起作用，因为你使用了

.div {

text-align: center,

}

in your CSS code and the .在您的 CSS 代码和. symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code象征着一个类，而如果你像这样写它，它会起作用，因为它会给你代码中存在的所有 div 提供文本中心

div {
text-align: center,
}

But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.但我觉得你应该使用类并在 div 中居中文本，以便它可以特定于你想要居中文本的 div，因此尝试优先考虑第二种或第三种方式而不是第一种方式。

(HTML, CSS) text-align : center 不工作<div>

问题描述

2 个解决方案

解决方案1
5 2022-07-04 15:15:02

解决方案2
1 已采纳 2022-07-04 15:31:40

(HTML, CSS) text-align : center 不工作<div>

问题描述

2 个解决方案

解决方案1 5 2022-07-04 15:15:02

解决方案2 1 已采纳 2022-07-04 15:31:40

解决方案1
5 2022-07-04 15:15:02

解决方案2
1 已采纳 2022-07-04 15:31:40