Вирівняйте вміст у розділі

152

Я використовую вирівнювання тексту в стилі css, щоб вирівняти вміст всередині контейнера в HTML. Це добре працює, коли вміст є текстовим чи браузер IE. Але інакше це не працює.

Крім того, як випливає з назви, він використовується в основному для вирівнювання тексту. Властивість вирівнювання застаріло задовго.

Чи є інший спосіб вирівняти вміст у html?

html css text-align

— Hemanshu Bhojak
джерело

Дайте нам, будь ласка, більше інформації? минулий код, який не працює в інших браузерах.

— Шобан

Ви повинні навести приклад своєї розмітки, щоб люди знали, що ви намагаєтеся зробити. Інакше ваше запитання неоднозначне.

— levik

216

Вирівнювання тексту вирівнює текст та інший вбудований вміст. Він не вирівнює дітей-блокових елементів.

Для цього потрібно надати елементу, який потрібно вирівняти по ширині, з "автоматичним" лівим і правим полями. Це стандарт, який відповідає стандартам, який працює скрізь, крім IE5.x.

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

Щоб це працювало в IE6, вам потрібно переконатися, що режим стандартів увімкнено, використовуючи відповідний DOCTYPE.

Якщо вам дійсно потрібно підтримувати режим IE5 / Quirks, який сьогодні вам не слід, можна поєднувати два різні підходи до центрування:

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

(Очевидно, стилі найкраще розміщувати всередині таблиці стилів, але вбудована версія є ілюстративною.)

— бобінець
джерело

2

Якщо ви не знаєте ширини Div, що часто трапляється, це рішення чудово працює у всіх браузерах: matthewjamestaylor.com/blog/…

— Артем Русаковський,

Я використав <div style = "width: 100%; margin: 0 auto;"> Привіт </div>

— Aamol

9

Ви також можете зробити це так:

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%; }

Як згадував Артем Русаковський , прочитайте оригінальну статтю Маттея Джеймса Тейлора для повного опису.

— Махді
джерело

9

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

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

— krithi k
джерело

1

Хоча цей фрагмент коду може вирішити питання, зокрема пояснення дійсно допомагає покращити якість вашої публікації. Пам'ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.

— andreas

Вибачте, вищевказаний код буде вирівнювати центр

— дів

6

Чесно кажучи, я ненавиджу всі рішення, які я бачив до цього часу, і я скажу вам, чому: Вони, здається, ніколи не вирівнюють це правильно ... так ось що я зазвичай роблю:

Я знаю, які значення пікселів мають кожен div та їхні поля… тому я роблю наступне.

Я створять оболонку div, яка має абсолютне положення та ліве значення 50% ... тож цей дів починається посередині екрана, а потім я віднімаю половину всього вмісту ширини div ... і я отримую КРАСИВНО масштабування вмісту ... і я думаю, що це працює і в усіх браузерах. Спробуйте самі (цей приклад передбачає, що весь вміст на вашому веб-сайті загорнутий у тег div, який використовує цей клас обгортки, а весь вміст у ньому шириною 200 пікселів):

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

EDIT: я забув додати ... ви також можете встановити ширину: 0px; у цьому розділювальному коду для деяких браузерів не відображаються смуги прокрутки, і тоді ви можете використовувати абсолютне позиціонування для всіх внутрішніх символів.

Це також працює ДУМОВО для вертикального вирівнювання вашого вмісту, а також використання верхніх: 50% та максимальної рентабельності. Ура!

— Олександру
джерело

2

Ось метод, який я використовую, який добре працював:

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

Розгорніть фрагмент

— Блудхаунд
джерело

2

Нижче наведено методи, які завжди працювали на мене

Використовуючи модель розкладки макетів :

Встановіть відображення батьківського діла display: flex;та ви можете вирівняти дочірні елементи всередині діви за допомогою justify-content: center;(для вирівнювання елементів на головній осі) та align-items: center;(для вирівнювання елементів на поперечній осі).

Якщо у вас є кілька дочірніх елементів і ви хочете контролювати їхнє розташування (стовпець / рядки), ви також можете додати flex-directionвластивість.

Робочий приклад:

.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>

Розгорніть фрагмент

2. (старший метод) Використання позиції, властивостей поля та фіксованого розміру

Робочий приклад:

.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>

Розгорніть фрагмент

— nmak18
джерело

1

Усі відповіді говорять про горизонтальне вирівнювання.

Для вертикального вирівнювання декількох елементів вмісту розгляньте такий підхід:

<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>

Розгорніть фрагмент

— Ніколас
джерело

-2

Ще один приклад використання HTML та CSS:

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

— Діого
джерело

27

Жодне з написаного вами не стосується ASP.NET. Це просто HTML та вбудований CSS. Ви мали на увазі виписати серверне управління із властивостями?

— webworm

1

Виправлено. Зараз у відповіді згадуються правильні технології.

— jony