HTML / CSS文本不对齐

Question

I'm making a website and my text won't align to the center for the index-intro h1!

 .index-intro { width:100%; background-color: #00C8FF; height: 20px; float:center; } .index-intro h1 { font-family: tpeb; font-size: 15px; text-transform: uppercase; text-align:center; display:inline-block; } 

 <section> <div class="index-intro"> <div class="wrapper"> <h1>Welcome to Anime!</h1> </div> </div> </section> 

And thanks :)

Answer 1

Here is a trimmed down set of HTML and CSS:

 .index-intro { background-color: #00C8FF; text-align:center; } .index-intro h1 { font-size: 15px; text-transform: uppercase; } 

 <div class="index-intro"> <div class="wrapper"> <h1>Welcome to Anime!</h1> </div> </div> 

This aids the vertical alignment issues too, since you had fixed the height of the containing <div> . Although I guess you may have wanted that?

Here it is with some padding thrown in: https://jsfiddle.net/9a3b4f7g/1/

Answer 2

Please try following code snippet

 .index-intro { width:100%; background-color: #00C8FF; height: 20px; text-align:center } .index-intro h1 { font-family: tpeb; font-size: 15px; text-transform: uppercase; } 

 <section> <div class="index-intro"> <div class="wrapper"> <h1>Welcome to Anime!</h1> </div> </div> </section> 

Answer 3

Your Css is okay.

Just add this class in style tag

<style type="text/css">
  .wrapper
  {
  text-align: center;
  }
</style>

Answer 4

Believe it or not, you can do what you're looking for with just

.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
text-align:center; /*this makes the text go in the middle*/
display:inline-block;
width:100%;
background-color: #00C8FF; /*your bar color*/
padding-top:20px;  /* this "fattens" the blue bar topside */
padding-bottom:20px; /* this "fattens" the blue bar bottomside */
}

What this basically does is, 'make a blue bar that fits 100% the window width, with text in the middle, fatten it top and bottom'. It's better to keep your CSS simple like this if you can. Keeps you from getting confused in the long run.