Kann nicht zentriert Text mit CSS bekommen

OK, ich weiß, es ist ein bekanntes Problem mit bekannten Lösungen, aber ich kann es nicht auf meiner Seite arbeiten. So habe ich eine einfache HTML:Kann nicht zentriert Text mit CSS bekommen

<div id="sloganctnctn"> 
    <div id="sloganctn"> 
     <p id="slogan"> 
      A long line that can go to several lines on small width... 
     </p> 
    </div> 
</div>

Und die CSS:

#sloganctnctn 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 105px; 
    font-family: hos; 
    font-size:1.5rem; 
    color:#378de2; 
} 
#sloganctn 
{ 
    display:inline-block; 
    width: 100%; 
    height: 100%; 

    line-height: 105px; 
} 
#slogan 
{ 
    text-align: center; 
    vertical-align: middle; 
    line-height: 2; 
}

Aber das funktioniert nicht, siehe jsfiddle: http://jsfiddle.net/Sw3Jd/600/

Dank

Quelle

2017-07-18 Entretoize

Entfernen 'line-height: 2;'. –

Vertikal zentriert? – sol

-1

ändern #sloganctn, #slogan zu:

#sloganctn 
{ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    height: 100%; 
} 

#slogan 
{ 
    text-align: center; 
}

http://jsfiddle.net/bd15p9x6/ Oder ändern #slogan zu:

#slogan 
{ 
    text-align: center; 
    vertical-align: middle; 
}

http://jsfiddle.net/o80hz2pg/

Quelle

2017-07-18 09:30:03 Captain

Sie CSS Flex verwenden, können durch das Ausrichten der Flex Elemente in der Mitte des flexiblen Behälters den gewünschten Effekt zu erzielen. Ich habe das CSS kommentiert, damit Sie sehen können, was ich im folgenden Beispiel hinzugefügt/geändert habe. Ich habe auch eine Hintergrundfarbe auf den Körper angewendet, so dass es einfacher ist, die zentrierte Ausrichtung im Beispiel-Beispiel zu sehen.

html{ 
 
    font-size:12px; 
 
    margin:0; 
 
} 
 
body{ 
 
    font-size:1rem; 
 
    margin:0; 
 
    background:#EBEBEB; 
 
} 
 
div{ 
 
    box-sizing:border-box; 
 
} 
 

 
#head{ 
 
    width:100%; 
 
    height:105px; 
 
    background:#fff; 
 
    position:relative; 
 
} 
 

 
#sloganctnctn{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    bottom:0;/** ADDED **/ 
 
    right:0;/** ADDED **/ 
 
    font-family: hos; 
 
    font-size:1.5rem; 
 
    color:#378de2; 
 
    
 
    /** ADDED BELOW SECTION **/ 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
} 
 

 
#sloganctn{ 
 
    /** REMOVED SOME STYLES HERE **/ 
 
    display:inline-block; 
 
    width:100%; 
 
} 
 

 
#slogan{ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 2; 
 
}

<body> 
 

 
<div id="head"> 
 

 
    <div id="sloganctnctn"> 
 
    <div id="sloganctn"> 
 
     <p id="slogan"> 
 
     A long line that can go to several lines on small width... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Quelle

2017-07-18 09:41:43

Perfekt, ich weiß immer noch nicht, warum meine Lösung nicht funktioniert hat, aber vielleicht ist es eine tatsächliche Lösung. Vielen Dank – Entretoize

Kann nicht zentriert Text mit CSS bekommen

Antwort

Verwandte Themen