CSS Text Mittig aber linksbündig?

5 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
funcky49
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
10.02.2019, 17:08

Das ist ein Widerspruch in sich.

Entweder links- oder rechtsbündig oder zentriert oder Blocksatz.

Möglicherweise meinst Du aber auch den "Blocksatz":

text-align: justify;

oder @ChrisCat1 hat Deine Frage besser verstanden ;-)
Woher ich das weiß:Berufserfahrung – Langjährige Erfahrung als IT-Systemtechniker
Bizarrus
10.02.2019, 17:32

Du scheinst ein List-Element zu verwenden (<ul> bzw. <ol>).

Bitte zeige etwas Code von dir, denn es schaut so aus, als ist dein HTML-Dokument kaputt und invalide!

Wenn du den Text normal in einem List-Element setzt, sind diese automatisch linksbündig und auch aneinander ausgerichtet.

Ein List-Element kannst du mit Flexbox oder aber auch mit fester Breite sowie einem Auto-Margin zentrieren.
Woher ich das weiß:Berufserfahrung
Thrm23 
Beitragsersteller
 11.02.2019, 12:09

<ul> 

<b><u>Warum</u></b> soll der Content veröffentlicht werden? 

<li>

<b><u>Wann</u></b> soll der Content veröffentlicht werden?

<li>

<b><u>Wie</u></b> soll der Content veröffentlicht werden?

<li>

<b><u>Wer</u></b> soll den Content schreiben/lesen?

<li>

<b><u>Wozu</u></b> soll der Content veröffentlicht?

<li>

<b><u>Was</u></b> soll der Content sein?<br>

</ul>

Bizarrus  11.02.2019, 12:10
@Thrm23

Dein HTML ist völlig kaputt. Einen Eintrag erstellst du immer mittels 

<li>INHALT</li>

davor oder danach (genauso wie beim <ul>) dürfen keine anderen tags vorkommen! Setze deine Inhalte Regelkonform im <li> - Nutze hierzu auch http://validator.w3.org/ um zu prüfen, ob dein HTML valide ist.

Thrm23 
Beitragsersteller
 11.02.2019, 12:13
@Bizarrus

Ich weis, dass ich einige falsche Codes verwende. Jedoch funktionieren sie so wie sie sollen. Welche Nachteile können durch falsche Codes entstehen?

EinAlexander  11.02.2019, 12:20
@Bizarrus
Dein HTML ist völlig kaputt.

Völlig kaputt ist es nicht. Es fehlt ein einziges <li>-Tag nach dem <ul>-Tag. Sonst ist der Code korrekt.

Bizarrus  11.02.2019, 20:16
@EinAlexander

Doch es ist kaputt. HTML hat einen Standard, an den sollte man sich halten, nicht umsonst gibt es Richtlinien.
Es mag sein, dass viele moderne Webbrowser damit umgehen können, aber ich garantiere dir, nicht jeder Browser zeigt das gleiche an, weil jede Engine andere Fallbacks besitzt und anders damit umgeht. Kontrolliere die kaputte Variante doch mal in den verschiedenen Browsern - Chrome, Opera, Safari, IE, Firefox...

EinAlexander  11.02.2019, 20:50
@Bizarrus

Wie gesagt, es fehlt ein einziges <li> Tag, ansonsten ist der Code völlig korrekt.

EinAlexander  12.02.2019, 09:07
@Bizarrus
HTML hat einen Standard, an den sollte man sich halten, nicht umsonst gibt es Richtlinien. Es mag sein, dass viele moderne Webbrowser damit umgehen können, aber ich garantiere dir, nicht jeder Browser zeigt das gleiche an,

Es ist auch nicht das Ziel von Validität, eine Seite in jedem Browser gleich aussehen zu lassen. Derselbe Code wird in unterschiedlichen Browsern immer anders angezeigt. Egal ob es "kaputtes" oder valides HTML ist.

Bizarrus  12.02.2019, 09:15
@EinAlexander

Da spricht der Fachmann ;) In den ganzen Fachforen würdest du mit deinen Aussagen zerfetzt werden - Kein Wunder dass du hier bist :D
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
11.02.2019, 12:09 
<!doctype html>
<title>Blockelement zentrieren</title>
<style>
section {text-align:center}
ul { display:inline-block}
li {text-align:left}
</style>
<section>
<ul>
<li>Warum soll der Content veröffentlicht werden</li>
<li>Wann soll der Content veröffentlicht werden</li>
<li>Was soll der Content sein</li>
</ul>

Alex
Thrm23 
Beitragsersteller
 11.02.2019, 12:11

Perfektes Timing sowie auch Antwort. Danke!
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
12.02.2019, 11:17

HTML:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>GuteFrage.net - Demo: Unsortierte Liste</title>
  </head>
  <body>
    <ul class="list"> 
      <li class="list__item"><span class="list__accent">Warum</span> ...?</li>
      <li class="list__item"><span class="list__accent">Wann</span> ...?</li>
      <li class="list__item"><span class="list__accent">Wie</span> ...?</li>
      <li class="list__item"><span class="list__accent">Wer</span> ...?</li>
      <li class="list__item"><span class="list__accent">Wozu</span> ...?</li>
      <li class="list__item"><span class="list__accent">Was</span> ...?</li>
    </ul>
  </body>
</html>

CSS:

.list__accent {
 font-weight: bold;
 text-decoration: underline;
}

LG medmonk
Woher ich das weiß:Berufserfahrung
ChrisCat1, UserMod Light
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
10.02.2019, 17:06

Pack den Text in ein Block-Element, z.B. ein div. Dieses Element richtest du dann mittig auf der Seite aus und den Text innerhalb des Elements kannst du dann linksbündig darstellen.
Thrm23 
Beitragsersteller
 10.02.2019, 17:09

Wie richtige ich ein ganzes Element mittig an?

ChrisCat1, UserMod Light  10.02.2019, 17:17
@Thrm23

z.B. so:

div {
    margin-left: auto;
    margin-right: auto;
    width: 250px;
}

Das div-Element währe hier dann 250px breit und wird über die Seitenabstände (margin) automatisch ausgerichtet.
Die Breite müsstest du dann auf deinen Text anpassen.