knubbel: Zentriert und gleichzeitig Linksbündig

Hallo,
ich habe früher Tabellen benutz um Texte oder Bilder zu zentrieren und suche dafür eine Alternative. Das Problem ist ich will die Sachen Zentriert und gleich zeitig Linksbündig.
Es ist mir egal ob es mit html oder css gelößt wird.
Wenn ich mit <p> zentriere wird es nicht so wie ich es haben will.
So will ich es haben:

-----------------------------
|                           |
|         Hallo             |
|         go                |
|         blablablba        |
|         go                |
|                           |
|                           |
|                           |
|                           |
-----------------------------

und das pssiert bei <p> oder <div>:
-----------------------------
|                           |
|            Hallo          |
|             go            |
|         blablablba        |
|             go            |
|                           |
|                           |
|                           |
|                           |
-----------------------------

Ich wills immer zentriert haben und gleich zeitig linksbündig, egal was für eine Auflösung der Sürfer hat.

Mfg

  1. Hallo,

    ich habe früher Tabellen benutz um Texte oder Bilder zu zentrieren und suche dafür eine Alternative. Das Problem ist ich will die Sachen Zentriert und gleich zeitig Linksbündig.
    Es ist mir egal ob es mit html oder css gelößt wird.

    am besten mit Beidem!

    Klingt für mich nach:
    <p style="padding-left: 50%">Dein Text</p>

    oder wahlweise auch

    <div style="padding-left: 50%">...</div>

    Gruß Gunther

    1. Hallo,

      vielen Dank für die schnelle Antwort, wenn ich dass so mache bekomme ich so ein Ergebniss:
      -----------------------------
      |                           |
      |             Hallo         |
      |             go            |
      |             blablablba    |
      |             go            |
      |                           |
      |                           |
      |                           |
      |                           |
      -----------------------------

      Ich hätter es gerne so:
      -----------------------------
      |                           |
      |         Hallo             |
      |         go                |
      |         blablablba        |
      |         go                |
      |                           |
      |                           |
      |                           |
      |                           |
      -----------------------------

      Sicher könnte ich 20% nehmen, aber die Sürfer benutzen doch verschiedene Auflösungen.

      Mfg

      Hallo,

      ich habe früher Tabellen benutz um Texte oder Bilder zu zentrieren und suche dafür eine Alternative. Das Problem ist ich will die Sachen Zentriert und gleich zeitig Linksbündig.
      Es ist mir egal ob es mit html oder css gelößt wird.

      am besten mit Beidem!

      Klingt für mich nach:
      <p style="padding-left: 50%">Dein Text</p>

      oder wahlweise auch

      <div style="padding-left: 50%">...</div>

      Gruß Gunther

      1. Hello out there!

        […] aber die Sürfer benutzen doch verschiedene Auflösungen.

        Welche Auflösungen sie auch immer benutzen, sie haben für dich keinerlei Relevanz.

        Bedenke bei der Gelegenheit, dass es problematisch ist, für Fließtexte feste Breiten vorzugeben; bei schmalem Viewport muss dann horizontal gescrollt werden, das ist nutzerfeindlich. 'max-width' ist die zu verwendende Eigenschaft, nicht 'width'.

        Es ist mir egal ob es mit html oder css gelößt wird.

        Das sollte es aber nicht. Für Darstellungsangaben ist CSS da, nicht HTML.

        See ya up the road,
        Gunnar

        PS: Kein TOFU!

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  2. Hi,

    Ich wills immer zentriert haben und gleich zeitig linksbündig, egal was für eine Auflösung der Sürfer hat.

    Du könntest ein div machen, es zentrieren, und den Inhalt des div auf text-align:left; setzen.

    Grüße,
    Engin
     GYRO

    --
    Dilated peoples|Team Vestax
    Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
  3. Hi,
    wie wäre es damit ...

    <html>
    <head>
    <title>lalala</title>
    <style type="text/css">
    body {
     margin:0 0 0 0;
    }

    #container {
     width: 100%;
     border: 1px solid black;
     text-align: center;
    }

    #inhalt {
     width:300px;
     border: 1px solid red;
     text-align: left;
    }

    </style>
    </head>

    <body>
    <div id="container">
     <div id="inhalt">
      test<br>
      test<br>
      test<br>
      test
     </div>
    </div>
    </body>

    </html>

    mfg
    Knusperklumpen

    1. Hello out there!

      wie wäre es damit ...

      Schlecht ...

      #container {
      text-align: center;
      }

      ... denn 'text-align' wirkt nur auf Text (wär hätte’s gedacht bei der Bezeichnung) u.a. Inline-Inhalte, nicht jedoch auf Blockelemente. [CSS2 §16.1]

      (Es hibt einen Browser, der das falsch interpretiert, aber der ist kein Maßstab.)

      Wie’s richtig geht, steht in den FAQ, weil’s schon so viele gefragt haben. Jehova2!

      See ya up the road,
      Gunnar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  4. Hallo Knubbel

    Wenn ich mit <p> zentriere wird es nicht so wie ich es haben will.
    So will ich es haben:


    |                           |
    |         Hallo             |
    |         go                |
    |         blablablba        |
    |         go                |
    |                           |
    |                           |
    |                           |

    Wenn du dem Block eine feste Breite (oder besser Maximalbreite) geben kannst, dann ist es einfach.
    CSS:

    body {  
      text-align: center; /* damit es auch alte IEs begreifen */  
    }  
    .center {  
      text-align: left;   /* der Inhalt soll links stehen */  
      margin: 0 auto;     /* rechts und links automatisch einen gleich breiten Rand  
                             oben und unten keinen Rand (0 oder wie von dir gewünscht */  
      width: 20em;        /* besser wäre min-width was aber alte IEs nicht kennen */  
    
    ~~~}  
      
    Das Blockelement welches zentriert werden soll muss dann die Klasse center (class="center") erhalten.  
      
    Wenn die Breite des Blocks nicht festgelegt werden kann sondern sich aus dem Inhalt ergeben muss, dann wird es etwas komplizierter.  
    Dieses [Beispiel](http://d-graff.de/demos/selfhtml/center-test.html) dürfte mindestens in IE6, aktuellen Geckos und Operas funktionieren.  
      
      
    Auf Wiederlesen  
    Detlef  
    
    -- 
    - Wissen ist gut  
    - Können ist besser  
      
    - aber das Beste und Interessanteste ist der Weg dahin!