Align center html text: How to Center Text in HTML

Leave a Comment / Html / By /

советов по адаптивному выравниванию текста? — HTML и CSS — Форумы SitePoint

cheli

#1

Я работаю над шаблоном электронной почты (да, ТАКИМ ЖЕ, если вы следите за моими сообщениями. Я прогрессирую, обещаю!).

В верхней части дизайна у меня есть тизерный текст. На больших экранах я бы хотел, чтобы это было выровнено по правому краю, но на меньших экранах я бы хотел, чтобы оно было выровнено по центру.

Я не думаю, что правильно понимаю, как «переопределить» стиль большего экрана, потому что я пытался настроить несколько разных селекторов без результата, который я ищу.

Текущий код находится здесь, но, поскольку он имеет встроенные стили, я также включил встроенную версию, которую я редактирую ниже.

  01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 


<голова>



<название>
<тип стиля="текст/CSS">
/* Стили, специфичные для клиента */
#outlook a{padding:0;} /* Заставить Outlook предоставить кнопку «Просмотр в браузере». */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Заставить Hotmail отображать электронные письма на полную ширину */
body{-webkit-text-size-adjust:none;} /* Запрещает платформам Webkit изменять размеры текста по умолчанию. */
/* Сбросить стили */
тело {маржа: 0; заполнение: 0;}
изображение {граница: 0; высота:авто; высота строки: 100%; контур: нет; украшение текста: нет;}
таблица td{граница-коллапс:коллапс;}
#backgroundTable{высота:100% !важно; маржа: 0; заполнение: 0; ширина:100% !важно;}
/* Стили меньшего экрана */
Только экран @media и (максимальная ширина: 480 пикселей) {
таблица[id=backgroundTable]{
максимальная ширина: 600 пикселей! важно;
ширина:100% !важно;
}
таблица[id=contentWrapper],[класс=заголовок],[класс=contentTable]{
            ширина: 320 пикселей! важно;
}
таблица [класс = заголовок] тд {
выравнивание текста: по центру; !важный;
}
тд [класс = логотип] img {
       заполнение снизу: 0; !важный;
}
td[класс=изображение] img{
высота:авто !важно;
       ширина:100% !важно;
}
}
/* Стили шаблонов */
тело, #backgroundTable{
цвет фона:#FAFAFA;
}
.
  contentTable{
цвет фона:#FFF;
}
h2, h3, h4, h5, п{
семейство шрифтов: Helvetica, Arial, без засечек;
выравнивание текста: по центру;
}
ч2, ч3{
цвет:#939598;
размер шрифта: 22px;
высота строки: 100%;
}
h4{
цвет:#2755A1;
размер шрифта: 26px;
высота строки: 100%;
}
п{
цвет:#000;
размер шрифта: 13px;
высота строки: 150%;
}
.заголовок р{
цвет:#939598;
}
а {
цвет:#2755A1;
}
.нобр {
пробел: nowrap;
отступ слева: 0px;
отступы справа: 0px
}

 



<центр>












<тд>








 png" alt="Логотип института Уолтера и Элизы Холл" title="логотип института">











Не можете просмотреть это приглашение на мероприятие? 
 Просмотрите в браузере.














 
Пригласитель
 
 
рад пригласить 
 

вы
 
к "названию мероприятия"
 

"цель"

в "местоположении"

on "день, число, месяц, время"

 
RSVP: "имя" по "день, число, месяц"
 

По электронной почте или по телефону (03) 0000 0000

пожалуйста, сообщите о любых диетических требованиях


Дресс-код: "code"

"направления парковки"






 
 ральф 
 #2
 На данный момент он центрирован внутри строки, поэтому вы можете переопределить его в с помощью таких стилей:
 @media only screen и (min-width: 1020px) {
  .header p {выравнивание текста: правильно! важно;
}
 
 Чели 
 #3
 Ага, хорошо. Я перевернул его (я хотел, чтобы он был правильно выровнен на больших экранах, чтобы медиа-запрос был правильным).
 @media только экран и (макс.
  ширина: 480 пикселей) {
таблица [класс = заголовок] р {
выравнивание текста: по центру; !важный;
}
}
.заголовок р{
цвет:#939598;
выравнивание текста: вправо;
}
 
 Все хорошо. За исключением того, что теперь логотип выравнивается по левому краю на небольших экранах. Я могу исправить это, изменив свой медиа-запрос:
 @media only screen и (max-width: 480px) {
таблица [класс = заголовок] тд {
выравнивание текста: по центру; !важный;
}
}
 
 Ура! Но меня раздражает, что мне пришлось написать два стиля, чтобы добиться практически одинакового эффекта для изображения логотипа и текста тизера. Есть ли более разумный способ сделать это?
 ральф 
 #4
 Я немного запутался, эти кажутся мне противоречивыми:
 
 
 @media only screen and (max-width: 480px) {
таблица [класс = заголовок] р {
выравнивание текста: по центру; !важный;
}
}
. заголовок р{
цвет:#939598;
выравнивание текста: вправо;
}
 
 Во всяком случае, обратите внимание, что у вас не может быть ; до !важно. Потребуется
 text-align: center !important;
 Похоже, !important вообще не нужен, так как он все равно не применяется.
 Чели 
 #5
 Привет, Ральф,
 Эти стили противоречивы, но только в том смысле, что стиль .header p применяется до тех пор, пока ширина экрана не станет меньше 480 пикселей, и в этом случае применяется стиль table[class=header] p.
 Спасибо за подсказку: точка с запятой перед !important. Я не знал об этом, поэтому исправил свой код
 ralphm 
 #6
 Чели:
 Эти стили противоречивы, но только в том смысле, что стиль .header p применяется до тех пор, пока ширина экрана не станет меньше 480 пикселей, и в этом случае применяется стиль table[class=header] p.
 Мда, я невнимательно прочитал. На первый взгляд казалось, что все это было частью одного и того же правила @media.
 Чели 
 
 16 апреля 2013 г., 7:03 
 #7
 Я сделал так много ляпов в вашем присутствии, что я склонен верить, что вы сделали это только для того, чтобы мне стало лучше
 ralphm 
 #8
 Чели:
 Я склонен полагать, что ты сделал это только для того, чтобы мне стало лучше
 Конечно.
 система 
 Закрыто 
 8 октября 2014 г., 4:04 
 #9
 Разница между Text-Align-Center и Margin-Auto 
 В  CSS  для центрирования элемента по горизонтали, вы можете подумать, что  Flex  и  Grid  могут решить вашу проблему. НО,
  text-align: center  или  margin: auto  также могут помочь 🪄
 Поэтому знание разницы между  text-align: center  и  margin: auto  очень поможет, это также немного сложно в  CSS , позвольте мне объяснить их сходство:
 Оба свойства: 
  1.  используется  ТОЛЬКО  в блочных элементах.
     
  2.  использовал  ТОЛЬКО  для указания горизонтального выравнивания.
 Разница: 
  •   margin: auto  используется для центрирования HTML-элемента.
  •   text-align: center  используется для центрирования содержимого элемента.
 Кстати, 
  •  HTML-элемент — это все, от начального до конечного тега, включая HTML-теги.
  •  Содержимое элемента — это все, что находится между тегами.
 Выглядит немного ошеломляюще 😅, посмотрите на картинку.
 
 #first-green-box {
    фон: зеленый;
    выравнивание текста: по центру;
}
 
Войти в полноэкранный режимВыйти из полноэкранного режима
  •  Первое зеленое поле у ​​нас имеет ширину 100%, потому что по умолчанию блочный элемент занимает всю доступную ширину своего родителя, в нашем случае это  элемент Body  , следовательно, элемент контент, текст, будет центрирован по горизонтали внутри своего контейнера, открывающего и закрывающего тега ( 
          ).
 Если мы центрируем содержимое элемента справа, получим следующий результат: 
 #first-green-box {
    фон: зеленый;
    выравнивание текста: вправо;
}
 
Войти в полноэкранный режимВыйти из полноэкранного режима
 
 #second-green-box {
    ширина: 500 пикселей; // новый
    фон: зеленый;
    выравнивание текста: по центру;
}
 
Войти в полноэкранный режимВыйти из полноэкранного режима
  •  Второе зеленое поле такое же, как и первое, мы просто показываем и подтверждаем, что  text-align: center  зависит от ширины его контейнера, открывающего и закрывающего тега, а не от элемента  Body  .
 Из него делаем вывод, что текст внутри нашего  
  Тега  будет центрирован по горизонтали в пределах ширины открывающего и закрывающего тега. 
 #третий-зеленый-ящик {
    ширина: 500 пикселей;
    маржа: авто; // новый
    фон: зеленый;
    выравнивание текста: по центру;
}
 
Войти в полноэкранный режимВыйти из полноэкранного режима
  •  Третье поле, если мы добавили определенную ширину к нашему HTML-элементу и хотим отцентрировать его по горизонтали внутри родителя,  Я подчеркиваю  здесь мы хотим центрировать элемент по горизонтали  Элемент HTML  , а не  Содержимое элемента  , не внутри его открывающего и закрывающего тега. мы хотим центрировать HTML-элемент   внутри другого HTML-элемента   .
 Другими словами, сделайте блочный элемент в центре другого блочного элемента.
 В этом случае мы будем использовать мощность  margin: auto  , no  Flex  , no  Grid  только auto, auto, может решить нашу проблему. Следовательно, левое и правое поля будут разделены поровну.
 Обратите внимание, что если мы удалим  text-align  , содержимое элемента вернется к значению по умолчанию text-align, left и не повлияет на HTML-элемент, который будет находиться в центре. 
 #третий-зеленый-ящик {
    ширина: 500 пикселей;
    маржа: авто;
    фон: зеленый;
}
 
Войти в полноэкранный режимВыйти из полноэкранного режима
 Мы заключаем, что  margin: auto  влияет на элемент HTML, а не на содержимое элемента, поэтому, когда мы применяем  margin: auto  для элемента HTML, полная ширина которого зависит от элемента Body, не будет работать и не будет иметь никакого эффекта.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  





 it/580x300" alt=""/>