为什么我的文字不对齐：居中； 好好工作？

Question

Why isn't my text-align: center; working? The text and the span are supposed to be in the center of the image, (I'm kind of new at this, please understand).

HTML looks like this:

<div id="image">
    <div id="imageContainer">
        <span><h1>Responsive Web</h1></span>
    </div>
</div>

CSS looks like this:

   #imageContainer h1 {
    text-align: center;
    font-size: 60px;
    color: white;
    letter-spacing: 0.05em;
    } 
    #imageContainer span {
    display: inline-block;
    padding: 0.5em 0.2em;
    border: white solid 10px;
   }

I don't understand why it isn't working, my H1 tag isn't listening to my text-align: center; and neither is my span . This might be a newbie question, (lol) but this confuses me a lot, help please!

Answer 1

Remove the display property

#imageContainer span {

padding: 0.5em 0.2em;
border: white solid 10px;
}

Answer 2

Or put the width: 100% on

#imageContainer span {
  width: 100%;
}

Answer 3

When you assign display: inline-block; to your span , the span is only as width as its content. You will have to set its width to 100% to get it working, or remove the display: inline-block; .

Answer 4

try:

#imageContainer{ text-align: center; }

and the rest (span and h1)

display: inline-block; or display: inline;