Html text rechts schreiben?
Frage steht oben wie kann ich mit HTML rechts schreiben aber nicht das es ganz rechts am Rand ist sonder ich noch jeden centimeter bestimmen kann ob es knapp noch an der Ecke liegtbider zwischen Center und rechts
2 Antworten
Du kannst Text mithilfe der CSS Eigenschaft text-align u.a. links (left), mittig (center) oder rechts (right) ausrichten. Die gewünschten Innen- und Außenabstände hingegen mit padding und/oder margin definierst. Diese Eigenschaften entweder auf das Element selbst und/oder dessen Eltern-Element anwendest.
- CSS --> text-align: https://developer.mozilla.org/de/docs/Web/CSS/text-align
- CSS --> padding: https://developer.mozilla.org/de/docs/Web/CSS/padding
- CSS --> margin: https://developer.mozilla.org/de/docs/Web/CSS/margin
HTML:
<p>here comes some text...</p>
CSS:
p {
/* Inlineinhalte wie Text rechts ausrichten */
text-align: right;
/* Innenabstand nach rechts definieren */
padding-right: 2rem;
/* Außenabstand nach rechts definieren */
margin-right: 2rem;
}
Das <p> Element gehört zu den sogenanntes Block-Level Elementen und darf ausschließlich Inline-Elemente wie Text enthalten. Block-Level Elemente nehmen zudem – sofern nicht anders mit CSS festgelegt – immer die volle Breite des umschließenden Eltern-Elements ein.
Es gibt auch in deinem Fall unterschiedliche Wege und Lösungsansätze, wie du das gewünschte Ergebnis erreichen kannst. Es wäre daher hilfreich, wenn du uns deinen bisherigen Quellcode zeigst. So wie es @trheadi auch schon richtig geschrieben hat. Schau dir bitte das nachfolgende Snippet an.
HTML:
<div class="content">
<p>here comes some text...</p>
<!-- <p>-Element mit Hilfsklasse -->
<p class="has-text-right">here comes some other text...</p>
</div>
CSS:
/* Über das Eltern-Element den Abstand nach rechts festlegen */
.content { padding-right: 2rem; }
/* Dem <p>-Element einen Innenabstand nach rechts geben */
p { padding-right: 2rem; }
/* Ausrichtung von Inline-Elementen */
p { text-align: right; }
/* Ausrichtungen in eine "Hilfsklasse" auslagern */
.has-text-right { text-align: right; }
Wenn du mehrere (unterschiedliche) Elemente mit der gleichen Eigenschaft formatieren möchtest, diese entweder jedem Element einzeln zuweist oder dafür eine sogenannte „Hilfsklasse“ (Helper-Class) definierst. Über letztere lässt sich das Aussehen dann leicht auf andere Elemente übertragen.
LG medmonk
Die Antwort hängt von deinem Quellcode ab. Ich vermute einfach mal es geht um einen Text in einem Absatz, dann sähe das mit HTML und CSS so aus:
<p>Text Text</p>
p { padding-right: 12px; text-align: right; }