(HTML, CSS) text-align : center is not working on <div>-CodePudding

I used text-align:center to center the three divisions, but they are all aligned on the left. 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.

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
        
        src="images/Google_2015_logo.svg.png"
        alt="Google logo"
      />
    </div>
    <div>
      <input
        
        type="text"
        placeholder="Search Google or type a URL"
      />
    </div>
    <div>
      <button >Google Search</button>
      <button >I'm Feeling Lucky</button>
    </div>
  </body>
</html>

CodePudding user response：

Very simple,

div is not a class, is a html element, so do this;

CSS

 div {
        text-align: center;
      }

CodePudding user response：

You can do it in multiple ways, the simplest and the first way is to write a CSS like:

div { 
text-align: center
}

The second way if you want to use a inline CSS in your HTML code itself:

<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:

*for class

HTML:

<div > </div>

CSS:

.center {
text-align: center,
}

*for id

HTML:

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

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 {

text-align: center,

}

in your CSS code and the . 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 {
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.