Delphi-PRAXiS - [HTML/CSS] Ausrichtung links rechts und mitte

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [HTML/CSS] Ausrichtung links rechts und mitte (https://www.delphipraxis.net/148232-%5Bhtml-css%5D-ausrichtung-links-rechts-und-mitte.html)

[HTML/CSS] Ausrichtung links rechts und mitte

Hallo zusammen,

über die Suche Google habe ich es hinbekommen, dass ich einen links und einen rechts ausgerichteten Text auf einer Webseit mit div in einer Zeile angezeigt bekomme. Siehe

hier. Jetzt möchte ich aber noch Tabs über CSS in die Mitte dieser Zeile zeichnen.

Wie kann ich das machen ? Habe bis jetzt leider kein Beispiel im I-Net gefunden. Könnte mir das bitte jemand erklären, wie ich die Tabs in die gleiche Zeile zentriert zeichnen kann. Über Link, wo soetwas beschrieben ist freue ich mich natürlich auch.

Re: [PHP] Ausrichtung links rechts und mitte

Hallo Rolf,

also mit PHP hat das Thema absolut nichts zu tun. Es geht rein um HTML/CSS. ;)

Meinst du sowas in der Art?

Code:

			<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

   <head>

      <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

      <title>Test</title>

      <style type="text/css">

         * {

            margin: 0;

            padding: 0;

         }

         div.left {

            width: 20%;

            float: left;

            border: 1px solid red;

         }

         div.right {

            width: 20%;

            text-align: right;

            overflow: hidden;

            border: 1px solid red;

         }

         ul#tabs {

            margin: 0 auto;

            width: 60%;

            float: left;

            border: 1px solid blue;

         }

         ul#tabs li {

            float: left;

            list-style-type: none;

            width: 100px;

            border: 1px solid #AAAAAA;

         }

      </style>

   </head>

   <body>

      <div class="left">Left aligned text</div>

      <ul id="tabs">

         [*]Tab 1

         [*]Tab 2

         [*]Tab 3

      [/list]      <div class="right">Right aligned text</div>

   </body>

</html>

Grüße, Matze