Wie kann ich Text zu einem div hinzufügen, ohne den umgebenden Text zu beeinflussen?

-1

Ich versuche, das Burger-Button-Symbol zu meiner Kopfzeile hinzuzufügen. Bevor ich es hinzufüge, ist meine Example Title zentriert. Nachdem ich das Icon hinzugefügt habe, wird Example Title etwas nach rechts geschoben.Wie kann ich Text zu einem div hinzufügen, ohne den umgebenden Text zu beeinflussen?

Ich möchte Example Title bleiben zentriert auch mit dem Symbol an Ort und Stelle.

Ich habe

setzen

* { 
margin: 0; 
padding: 0; 
}

In meinem Stylesheet, aber es hilft in diesem Fall nicht.

Hier ist ein visuelles Beispiel für mein Problem.

Bevor Symbol

Nach Icon

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t text-align: center; 
 
} 
 

 
#navbut { 
 
\t cursor: pointer; 
 
\t font-size: 20px; 
 
} 
 

 
#title { 
 
\t width: 100%; 
 
\t background-color: #373737; 
 
\t color: #f4f4f4; 
 
\t padding: 5px 0; 
 
\t display: table; 
 
\t text-align: center; 
 
\t font-size: 4em; 
 
} 
 

 
#title p { 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
}

<div id="title"> 
 
<span id="navbut">&#9776;</span> 
 
<p>Example Title</p> 
 
</div>

Quelle

2016-11-16 oneman

'margin-left: -20px' wie es 20px rechts gedrückt wird. Oder wenn Sie sagen, dass Sie mehr Inhalt in Ihr div hinzufügen müssen und immer noch den Titel in der Mitte haben, dann können Sie erwägen, etwas wie ein Wasserzeichen zu tun. Es wird durch überlappende Divs gemacht.Habe Titel in einem div und andere Inhalte in anderen div dann benutze z-index und position absolute um divs zu überlappen –

@Reddy 'margin-left: -20px;' hat keinen Effekt, wenn in '#title p' platziert und es entfernt den Burger Symbol aus dem Bildschirm, wenn in '# navbut' platziert – oneman

Elemente werden fast immer Auswirkungen auf ihre Geschwister, wenn sie nicht absolut positioniert sind. Ich würde vorschlagen, 'position: relative;' auf '# title' zu setzen und' display: block; position: absolute; 'zusammen mit' top' und 'left' für Ihren Button. – Santi

position: absolute; helfen.

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t text-align: center; 
 
} 
 

 
#navbut { 
 
\t position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#title { 
 
    position: relative; 
 
\t width: 100%; 
 
\t background-color: #373737; 
 
\t color: #f4f4f4; 
 
\t padding: 5px 0; 
 
\t display: table; 
 
\t text-align: center; 
 
\t font-size: 4em; 
 
} 
 

 
#title p { 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
}

<div id="title"> 
 
<span id="navbut">&#9776;</span> 
 
<p>Example Title</p> 
 
</div>

Quelle

2016-11-16 03:55:57

Verwenden absolute Positionierung #navbut und relative Positionierung #title.

Genau wie:

#navbut { 
    position: absolute; 
    left: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
} 

#title { 
    position: relative; 
}

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t text-align: center; 
 
} 
 

 
#navbut { 
 
\t cursor: pointer; 
 
\t font-size: 20px; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
#title { 
 
\t width: 100%; 
 
\t background-color: #373737; 
 
\t color: #f4f4f4; 
 
\t padding: 5px 0; 
 
\t display: table; 
 
\t text-align: center; 
 
\t font-size: 4em; 
 
    position: relative; 
 
} 
 

 
#title p { 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
}

<div id="title"> 
 
<span id="navbut">&#9776;</span> 
 
<p>Example Title</p> 
 
</div>

hoffe, das hilft!

Quelle

2016-11-16 03:59:21

Es funktioniert, aber @ Ron.Basco gepostet zuerst so bekomme die angenommene Antwort. Aber trotzdem danke – oneman

@oneman Keine Probleme! –

Elemente werden am häufigsten von ihren Geschwistern beeinflusst, es sei denn, Sie nehmen sie "aus dem Fluss". In Ihrem Fall möchten Sie wahrscheinlich display: block; verwenden, um sicherzustellen, dass das div auf Ihre Positionsattribute reagiert, position: absolute;, damit es unabhängig von Geschwistern ist, und position: relative;, um den Bereich relativ zum übergeordneten Element und nicht zur Seite zu positionieren .

Etwas wie folgt aus:

#navbut { 
    cursor: pointer; 
    font-size: 20px; 
    display: block; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
} 

#title { 
    width: 100%; 
    background-color: #373737; 
    color: #f4f4f4; 
    padding: 5px 0; 
    display: table; 
    text-align: center; 
    font-size: 4em; 
    position: relative; 
} 

#title p { 
    display: table-cell; 
    vertical-align: middle; 
}

Quelle

2016-11-16 04:02:41 Santi

packe ich Ihr Problem und machen eine Lösung besser von meiner Seite hoffen, dass es Ihnen helfen wird.

* { 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t body { 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
\t \t #navbut { 
 
\t \t \t cursor: pointer; 
 
\t \t \t font-size: 20px; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 30px; 
 
\t \t \t left: 20; 
 
\t \t } 
 

 
\t \t #title { 
 
\t \t \t width: 100%; 
 
\t \t \t background-color: #373737; 
 
\t \t \t color: #f4f4f4; 
 
\t \t \t padding: 5px 0; 
 
\t \t \t display: table; 
 
\t \t \t text-align: center; 
 
\t \t \t font-size: 4em; 
 
\t \t \t position: relative; 
 
\t \t } 
 

 
\t \t #title .exapmle-title { 
 
\t \t \t display: table-cell; 
 
\t \t \t vertical-align: middle; 
 
\t \t }

<div id="title"> 
 
\t <div id="navbut">&#9776;</div> 
 
\t <div id="example-title">Example Title</div> 
 
</div>

Quelle

2016-11-16 04:08:59

Wie kann ich Text zu einem div hinzufügen, ohne den umgebenden Text zu beeinflussen?

Antwort

Verwandte Themen