Wyrównaj zawartość wewnątrz div

152

Używam wyrównania tekstu w stylu CSS, aby wyrównać zawartość wewnątrz kontenera w HTML. Działa to dobrze, gdy zawartość jest tekstowa lub przeglądarka to IE. Ale poza tym to nie działa.

Jak sama nazwa wskazuje, służy on głównie do wyrównywania tekstu. Właściwość align od dawna jest przestarzała.

Czy jest jakiś inny sposób wyrównania treści w html?

html css text-align

— Hemanshu Bhojak
źródło

Podaj nam więcej informacji? obok kodu, który nie działa w innych przeglądarkach.

— Shoban

Powinieneś podać przykład swojego znacznika, aby ludzie wiedzieli, co próbujesz zrobić. W przeciwnym razie twoje pytanie jest niejednoznaczne.

— levik

216

text-align wyrównuje tekst i inną zawartość w treści. Nie wyrównuje dzieci elementów blokowych.

Aby to zrobić, chcesz nadać elementowi, który chcesz wyrównać, szerokość, z lewym i prawym marginesem „auto”. Jest to sposób zgodny ze standardami, który działa wszędzie z wyjątkiem IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Aby to zadziałało w IE6, musisz upewnić się, że tryb standardów jest włączony, używając odpowiedniego DOCTYPE.

Jeśli naprawdę potrzebujesz obsługi trybu IE5 / Quirks, którego w dzisiejszych czasach nie powinieneś, możesz połączyć dwa różne podejścia do centrowania:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Oczywiście style najlepiej umieszczać w arkuszu stylów, ale wersja wbudowana ma charakter ilustracyjny).

— bobince
źródło

2

Jeśli nie znasz szerokości div, co często się zdarza, to rozwiązanie działa idealnie we wszystkich przeglądarkach: matthewjamestaylor.com/blog/…

— Artem Russakovskii

Użyłem <div style = "width: 100%; margin: 0 auto;"> Witaj </div>

— Aamol,

9

Możesz to zrobić również w ten sposób:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Jak wspomniał Artem Russakovskii , pełny opis można znaleźć w oryginalnym artykule Mattew Jamesa Taylora .

— Mahdi
źródło

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— krithi k
źródło

1

Chociaż ten fragment kodu może rozwiązać problem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość Twojego posta. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a osoby te mogą nie znać powodów, dla których zaproponowałeś kod.

— Andreas

Przepraszamy, powyższy kod wyrówna środek div z treścią nadrzędną

— krithi k

6

Szczerze mówiąc, nienawidzę wszystkich rozwiązań, które do tej pory widziałem, i powiem ci dlaczego: po prostu wydaje się, że nigdy nie dopasowują tego dobrze ... więc oto, co zwykle robię:

Wiem, jakie wartości pikseli mają każdy element div i ich odpowiednie marginesy ... więc wykonuję następujące czynności.

Utworzę opakowujący element div, który ma pozycję bezwzględną i lewą wartość 50% ... więc ten element div zaczyna się teraz na środku ekranu, a następnie odejmuję połowę całej zawartości elementu div ... i otrzymuję PIĘKNIE skalowanie treści ... i myślę, że to działa również we wszystkich przeglądarkach. Wypróbuj sam (w tym przykładzie przyjęto, że cała zawartość Twojej witryny jest opakowana w znacznik DIV, który używa tej klasy opakowania, a cała zawartość ma szerokość 200 pikseli):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDYCJA: zapomniałem dodać ... możesz też chcieć ustawić szerokość: 0px; w tym opakowującym elemencie div, aby niektóre przeglądarki nie wyświetlały pasków przewijania, a wtedy możesz użyć pozycjonowania bezwzględnego dla wszystkich wewnętrznych elementów div.

Działa to również NIESAMOWITE przy wyrównywaniu treści w pionie, a także przy użyciu top: 50% i margin-top. Twoje zdrowie!

— Alexandru
źródło

2

Oto technika, której używam, która działa dobrze:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Rozwiń fragment

— Ogar
źródło

2

Poniżej znajdują się metody, które zawsze działały dla mnie

Korzystając z modelu układu elastycznego :

Ustaw wyświetlanie nadrzędnego elementu DIV na display: flex;i możesz wyrównać elementy podrzędne wewnątrz elementu DIV, używając justify-content: center;(aby wyrównać elementy na głównej osi) i align-items: center;(aby wyrównać elementy na osi poprzecznej).

Jeśli masz więcej niż jeden element podrzędny i chcesz kontrolować sposób ich ułożenia (kolumny / wiersze), możesz również dodać flex-directionwłaściwość.

Przykład pracy:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Rozwiń fragment

2. (starsza metoda) Korzystanie z pozycji, właściwości marginesów i stałego rozmiaru

Przykład pracy:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Rozwiń fragment

— nmak18
źródło

1

Wszystkie odpowiedzi mówią o wyrównaniu poziomym.

Aby wyrównać w pionie wiele elementów treści, spójrz na to podejście:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Rozwiń fragment

— Nicolas
źródło

-2

Kolejny przykład wykorzystujący HTML i CSS:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— Diogo
źródło

27

Żadne z tego, co napisałeś, nie jest specyficzne dla ASP.NET. To tylko HTML i wbudowany CSS. Czy chodziło Ci o napisanie kontrolki serwera z właściwościami?

— webworm

1

Naprawiony. W odpowiedzi wymieniono teraz prawidłowe technologie.

— jony