2016-04-27 23 views
1

Wie erstelle ich ein Banner und zentriere Text in der Mitte?Text in der Mitte eines Banners zentrieren?

Ich habe versucht, relative Position auf Wrapper und absolut auf dem Bild div zu verwenden, konnte aber nicht positionieren.

#banner { 
 
    position: relative; 
 
    width: auto; 
 
} 
 
#banner_wrap img { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 50px; 
 
}
<div id="banner"> 
 
    <div id="banner_wrap"> 
 
    <img src="fe_bg_login_.png" /> 
 
    <div id="rockstar"> 
 
     <h1>I am a Rock Star Dude!</h1> 
 
    </div> 
 
    </div> 
 
</div>

+3

[ 'text-align'] (https: // Entwickler. mozilla.org/en-US/docs/Web/CSS/text-align) ist die Eigenschaft, die Sie suchen. – Shaggy

+0

Mögliches Duplikat von [Wie zentriere ich Text über einem Bild in beiden Dimensionen?] (Http://stackoverflow.com/questions/6132000/how-do-i-center-text-on-top-of-an - Bild-in-beiden-Dimensionen – Rob

Antwort

1

können Sie text-align: center; verwenden, das zu tun.

JSFiddle um es zu sehen.

0

text-align: center; Eigenschaft könnte Sie das tun lassen.

#banner { 
    position: relative; 
    width: auto; 
    background: #333; color: #fff; 
    text-align :center; 
} 

Das Bild in absolute Position nicht zentriert werden, wenn Sie text-align: center im Banner verwenden, das ist, warum ich die absolute Position es nach der Überschrift gesetzt und entfernt das gleiche Verhalten zu bekommen.

Fiddle

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

0

Ich denke, das ist das, was Sie suchen:

h1 { 
    text-align: center; 
}