Wie kann ich etwas zentrieren, wenn ich nicht weiß, vor der Zeit, was die Breite?

StackOverflow https://stackoverflow.com/questions/963823

  •  12-09-2019
  •  | 
  •  

Frage

Ich versuche, innerhalb eines div in einen Absatz-Tag mit etwas Text zu zentrieren, aber ich kann nicht scheinen, um es zu zentrieren Ränder mit: 0 Auto ohne eine feste Breite für den Absatz angeben zu müssen. Ich möchte nicht, eine feste Breite geben, weil ich dynamischen Text in den Absatz-Tag kommen muß, und es wird immer eine andere Breite sein auf, wie vielen Text es ist.

Wer weiß, wie ich den Absatz-Tag innerhalb des div zentrieren kann, ohne eine feste Breite für den Absatz angeben zu müssen oder ohne Tabellen?

War es hilfreich?

Lösung

Hier ist, wie es zu tun ein Stylesheet verwendet wird.

Stylesheet: 

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTML: 

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Andere Tipps

Neben "text-align" Eigenschaft

für Elemente innerhalb Blockelemente wie div Zentrierung

Verwendung CSS wie 

 margin:auto

etwas wie das, was unter

gebucht

Wenn vertikal zentriert, ist es besser, Tabellen zu verwenden (dies in den meisten Fällen ist die einzige die Cross-Browser-kompatible Lösung)

Sie verwenden können, 

 "text-align:center"  

 "vertical-align:middle"

Ich denke, die beste Methode ist, um das Element in einem Block-Level-Elemente zu enthalten und zu tun: 

.innerElement {margin:0 auto}

Da sie beide Blockebene sind Elemente, die den Schwimmer Parameter nicht haben, sollte es funktionieren toll!

hier eine nette Abhilfe für Zentrieren eines div ohne Breite .

ist tableless und ist in jedem Browser zu arbeiten!

Versuchen Sie, diese mit Inline-CSS: 

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

oder mit nur HTML 

<p align="center">Lorem ipsum dolor sit amet</p>

, wenn die div Breite gesetzt hat alles, was Sie brauchen, ist

.myDiv {text-align: center; }

höre auch Garry Kommentar. unter keinen Umständen verwenden Inline-CSS.

Auch eine andere schmutzige Lösung für diesen, falls Sie andere Sachen im div zum Zentrum:

Sie können immer:

$ ( 'youParagraph oder .otherContent ') wickeln ('');.

Natürlich nicht diese Praxis, wenn Sie in einem großen Team arbeiten und Trennung von Bedenken ist ein Problem.

Ich hoffe, das half.

Eh, Autopannen Breite, da standardmäßig Blockelement, wie

gesetzt brauchen

auf ganze zur Verfügung stehende Breite erweitern würde.

Wenn Sie nicht IE unterstützt <8 Sie könnten nur eingestellt {display: table; margin: 0 auto; }

Ansonsten, wenn Ihr Element von Block-Level-Elementen umgeben ist, könnten Sie tun, p {display: inline-block; } P {display: inline; } Html> / ** / body p {display: inline-block; } (Die letzten zwei Regeln sind für IE und Zurücksetzen IE fix für vernünftigen Browser) danach, {text-align gilt: center; } Auf den Behälter.

Als jemand bereits erwähnt, finden Sie unter http://haslayout.net/css-tuts/Horizontal -Centering für weitere Informationen.

Prost!     Zoffix Znet

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top