Как в html сделать заголовок по центру



заголовки сообщений, гаджетов Приветствую всех на своём блоге. Доброго времени суток. Обращали ли вы внимание на то, что при оформлении дизайна название блога, заголовок сообщения и заголовки гаджетов расположены не по центру. Возможно, кого-то и устраивает такой вариант. Но если есть желание выровнять их, то этот пост для вас.

Обычно мы создаём с помощью фотошопа или другого редактора свою уникальную шапку для блога. Тут, конечно, название расположено именно там, где мы его желаем видеть. Но не все изначально знают, как это сделать и довольствуются только теми настройками, которые нам предложены. В итоге название блога смещено влево.
Давайте посмотрим, как с помощью CSS в шаблоне блога можно это исправить. Идею для этого подсказал автор блога http://www.magentawave.com/.  Расположим все заголовки строго по центру и добавим немного уникальности им. Как обычно, идём во вкладку шаблон и обязательно делаем резервную копию. Если что-то пойдёт не так, вы сможете обратно загрузить шаблон со своего компьютера. А лучше будет, если пока все эксперименты вы будите делать на тестов блоге. Создайте для этого ещё один блог на основе того же шаблона.
Как выровнять по центру название блога.

Вкладка шаблон- изменить HTML. В самом верху шаблона нажимаем на чёрный маркер (стрелочку) слева.

 И вот тут перед нами открылись все коды  CSS. Спускаемся медленно вниз и находим строку .Header h1 { 



Сразу после скобок прописываем значение text-align:center;
Таким образом у нас название блога расположиться строго по центру. Нажмите просмотреть шаблон, чтобы увидеть результат. Всё получилось нажимаем сохранить.
Но чтобы немного разнообразить  дизайн разберём ещё несколько стилей CSS, которые также можно добавить в эти скобки. Нужно это вам или нет решайте сами. Тут можно применить массу вариантов. Меняйте цветовые значения на свои. Только будьте внимательны. Если меняете цвет, то только вот это  #e9967a-решётка и шестизначное число. Двоеточие, скобки, тире, точка с запятой-всё это очень важно в коде.
background:#e9967a;-цвет фона. или background:url(http://www.fonstola.ru/large/201310/134392.jpg); картинка вместо фона.
height:50px;-значение ширины блока названия.
text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); -задаём тень для текста
border-radius: 15px;-закругление углов.
-moz-box-shadow:0 0 30px #a28b53 inset;
box-shadow:0 0 30px #a28b53 inset;                            
-webkit-box-shadow:0 0 30px #a28b53 inset;
Выделенное синим цветом-внутренняя тень поля названия.
Посмотрите, пожалуйста здесь, что у меня получилась используя именно эти значения.
Как выровнять по центру заголовок гаджета в боковой панели.
Так же спускаемся ниже и находим такую строчку .sidebar.widget h2 { 



Также в скобки прописываем  text-align: center; Однако в этом случае необходимо задать ширину, размер шрифта, отступы. Ну и для оформления  здесь я вместо фона использовала изображение и задала  тень для текста и блока.
background:url(http://www.fonstola.ru/large/201310/134392.jpg);фон или изображение
height:20px; /высота/
width: 200px; /шырина/
border-radius: 13px; /закругление углов/
margin-left: 0px; /отступ от края/
padding-top:0px; / расстояние от края рамки/
font-size: 16px; /размер шрифта/
text-align: center; /расположение текста/
text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /тень для текста/
box-shadow: 0 4px 6px rgba(0, 0, 0,.2); /тень для блока/


Как выровнять по центру заголовок гаджета в футере. html


Сейчас  находим строку .footer-inner.widget h2 {



Прописываем те же самые стили. 


Как выровнять заголовок поста по центру. 


Ищем строчку h3.post-title { (в моём блоге отдельно таковой не было, а была вот такая h3.post-title h4, как вы видите на скриншоте. В этом случае измениться и заголовок комментариев. 



Конечно, если вы не меняли теги заголовков. То именно эта строка и понадобиться.  И выравниваем, прописав в скобки следующее-


text-align:center;

text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); Это значение для тени текста.  Если не нужно просто оставьте первую строчку. 


В зависимости от шаблона блога вполне возможно, что некоторых элементов вы у себя не найдёте. Значит нужно просто  перед строкой ]]></b:skin>, которая находиться чуть ниже всех этих кодов CSS, вставляем все стили. Обратите внимание, что все они заключены в фигурные скобки. Вот так примерно
.sidebar.widget h2 { 
background:url(http://www.fonstola.ru/large/201310/134392.jpg);
height:20px;
width: 200px;
border-radius: 13px;
margin-left: 0px;
padding-top:0px;
font-size: 16px;
text-align: center;
text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10);
box-shadow: 0 4px 6px rgba(0, 0, 0,.2);}
И так со всеми остальными.
Пост сегодня получился достаточно длинным. Благодарю тех кто дочитал его до конца. Как бы того мы не хотели, но придёт момент, когда  придётся начать понимать что это за коды, где они расположены и что с ними можно делать. Так что если сейчас и скажите, мол мне это не надо, поверьте,что это только пока.
А я сегодня наконец-то поставлю точку в сообщении и расстанусь с вами на некоторое время.
Большое спасибо, что уделили внимание моему блогу.
Удачи всем нам.

Ой, а что это там ниже? Ну надо же! Нажимаем!


оформите подписку на новые шпаргалки



Источник: http://www.shpargalochki.ru/2015/01/vyrovnjat-zagolovki-po-centru.html



Рекомендуем посмотреть ещё:


Закрыть ... [X]

HTML заголовки - HTML заголовок слева, справа, по центру страницы Рисунок маникюра на короткие в домашних условиях


Как в html сделать заголовок по центру Как в html сделать заголовок по центру Как в html сделать заголовок по центру Как в html сделать заголовок по центру Как в html сделать заголовок по центру Как в html сделать заголовок по центру Как в html сделать заголовок по центру Как в html сделать заголовок по центру