如何对齐标题 <h1> 在页面中心

Question

I want to center <h1> or <div class="heading"> on the page. The only solution I have found is

body { text-align: center; }

but I can't figure it out why this code doesn't work. Display: inline-block is used because I want the border to wrap around my .

 body { margin: 0; } .navbar { text-align: right; background: black; color: white; padding: 10px; } ul { list-style-type: none; padding: 5px; } li { display: inline-block; } .heading { border: 2px solid black; display: inline-block; text-align: center; } 

 <header> <nav class="navbar"> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul> </nav> <div class="heading"> <h1>heading</h1> </div> </header> 

Answer 1

Add this:

.heading {
  text-align: center; 
}

...and delete display: inline-block from .heading . Instead, add this

.heading h1 {
  display: inline-block;
}

.heading is the container of your h1 . Both are by default 100% wide. This centers the inline-block h1 inside the full-width .heading

Answer 2

The secret you are looking for is to use a block -level element, and also set a margin: 0 auto . This tells the block to centralise, much like a standard text-align: center .

.header {
  display: block;
  margin: 0 auto;
}

By default, block -level elements occupy 100% of the width of their container, so you might also want to specify a width for the header. Alternatively, you can have the header automatically adjust to the size of the text by adding a container div that is set as in inline-block , and moving the border to there:

 body { margin: 0; } .navbar { text-align: right; background: black; color: white; padding: 10px; } ul { list-style-type: none; padding: 5px; } li { display: inline-block; } .heading { display: block; margin: 0 auto; text-align: center; } .heading-wrapper { display: inline-block; border: 2px solid black; padding: 0 10px; } 

 <header> <nav class="navbar"> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul> </nav> <div class="heading"> <div class="heading-wrapper"> <h1>heading</h1> </div> </div> </header> 

This way, the header will stay centralised, and have the border automatically expand correctly to accommodate the header, no matter how much text there is.

Hope this helps! :)

Answer 3

a div displays block by default, so it's definitely important to declare if you want to display it otherwise.

However, again, as in another post i saw earlier, you have no css for the containing parent, the header , which would greatly assist you. You should apply any margin to be inherited to this, and there should be no need to apply a small width to your div.

 body { margin: 0; } header{margin: 0 auto;} .navbar { text-align: right; background: black; color: white; padding: 10px; } ul { list-style-type: none; padding: 5px; } li { display: inline-block; } .heading { border: 2px solid black; /*display: block; - even if you leave this out, it will display as block*/ text-align: center; } 

 <header> <nav class="navbar"> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul> </nav> <div class="heading"> <h1>heading</h1> </div> </header> 

Answer 4

You can center it by using display: flex; justify-content; display: flex; justify-content; on the parent element. Here is a great resource on centering things https://www.w3.org/Style/Examples/007/center.en.html

 body { margin: 0; } .navbar { text-align: right; background: black; color: white; padding: 10px; } ul { list-style-type: none; padding: 5px; } li { display: inline-block; } .heading { display: flex; justify-content: center; } 

 <header> <nav class="navbar"> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul> </nav> <div class="heading"> <h1>heading</h1> </div> </header>