Форум PHP программистов > Выравнивание заголовка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

tamina

15.09.2016 - 09:36

Добрый день. Как можно выравнять заголовок текста по середине. Возле заголовка ставлю тег <centre> он мне полностью весь текст ставит в центр.
Например, вот тег.

<P class=link><SPAN class=text>
</SPAN><BR><B><SPAN class=text><centre>ПРАВИТЕЛЬСТВО
РЕСПУБЛИКИ ТАДЖИКИСТАН </SPAN></B></P>

Valick

15.09.2016 - 09:56

tamina, <centre> - это открывающий тег, а </centre> закрывающий.
Для заголовков есть соответсвующие теги <h1></h1> <h2> и тд. Которым можно прописать стили в том числе и центрирование.

_____________
Стимулятор ~yoomoney - 41001303250491

Kusss

15.09.2016 - 09:59

во первых - center
во вторых этот тег нуждается в закрытии.
span - это строчный элемент, а не блочный.

тут 2 решения.

<p class="link">
	<span class="text"></span>
	<br>
	<center>
		<span class="text"><b>ПРАВИТЕЛЬСТВО РЕСПУБЛИКИ ТАДЖИКИСТАН </b></span>
	</center>
</p>

или

<p class="link">
	<span class="text"></span>
	<br>
	<div class="text" style="text-align:center;font-weight:bold;">ПРАВИТЕЛЬСТВО РЕСПУБЛИКИ ТАДЖИКИСТАН</div>
</p>

а лучше для 2 варианта, создать класс и вынести css в него

.text.center {text-align:center;font-weight:bold;}

<div class="text center">ПРАВИТЕЛЬСТВО РЕСПУБЛИКИ ТАДЖИКИСТАН</div>

Valick

15.09.2016 - 10:11

Цитата (Kusss @ 15.09.2016 - 08:59)

во первых - center

гыг, я даже не заметил))

Цитата (Kusss @ 15.09.2016 - 08:59)

тут 2 решения.

там их гораздо больше
я бы всё таки оформил вложенным тегом заголовка
грубо говоря документ должен быть удобоваримым даже при отсутствии стилей, даже если он и не будет по центру, но заголовок останется заголовком.

_____________
Стимулятор ~yoomoney - 41001303250491

tamina

15.09.2016 - 10:48

спасибо большое))

Valick

15.09.2016 - 11:33

оставлю для неторопливых

Пример использования класса со вложенными стандартными тегами

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
  .text{
	width: 800px;
	padding: 10px;
	border: 1px solid;
  }
  .text h1{
	font-size: 3em;
	text-align: center;
	color: red;
  }
  .text p{
    text-indent: 20px;
  }
  </style>
</head>
<body>
<h1>Обычный заголовок</h1>
<div class="text">
  <h1>Заголовок внутри класса text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum 
  dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
</body>
</html>

если убрать стили, то текст будет сохранять достаточно вменяемое форматирование.

_____________
Стимулятор ~yoomoney - 41001303250491

killer8080

15.09.2016 - 12:35

Цитата (Kusss @ 15.09.2016 - 09:59)

или
<p class="link">
<span class="text"></span>
<br>
<div class="text" style="text-align:center;font-weight:bold;">ПРАВИТЕЛЬСТВО РЕСПУБЛИКИ ТАДЖИКИСТАН</div>
</p>

так нельзя делать, внутри параграфа разрешены только строчные теги!

tamina
<center> уже давно считается устаревшим и не рекомендуется к использованию веб консорциумом.

qpurypaHT

17.09.2016 - 18:04

использование метода типа, является устаревшим:


<div style="text-align:center"></div>

На этот случай используется CSS (Cascading Style Sheets)

Их подучить и будет супер.

Используйте нижний регистр для html разметки, да верхний тоже будет работать, но бить по глазам.

<p></p>
<br>
<span></span>

Подключайте стили CSS к документу, а не гадьте им в самом документе в <head></head>, во-первых, это неудобно для постоянного скроллинга вверх, во вторых нет подсветки синтаксиса.:
<link rel="stylesheet" href="default.css"/>


<html>
	<head>
		<title>название документа</title>
		<link rel="stylesheet" href="default.css"/>
	</head>
	<body>
	</body>
</html>

Я не совсем понимаю логику вашего скрипта, к тому же в нем ошибки:

<P class=link>
<SPAN class=text>
</SPAN>
<BR>
<B><SPAN class=text><centre>
ПРАВИТЕЛЬСТВО РЕСПУБЛИКИ ТАДЖИКИСТАН 
</SPAN></B>
</P>

изучив CSS вы решите множество проблем с валидностью и головной болью.

Еще в CSS есть такая клевая функция как подключение документов.
Чтобы не создавать 1 файл под все стили который будет загружаться на каждой странице, следует делить его на несколько файлов.
скажем: style.css основной, он будет подключен в голове страницы: <link rel="stylesheet" href="style.css"/>

а внутри уже этого файла вписываем разделения:
@import url("template/colors.css");
@import url("template/userp_rofile.css");

Суть в том, что они будут подгружаться браузером по мере необходимости, если в определенной странице не будет стилей оформления профиля пользователей которые указаны в файле userp_rofile.css, он и не будет подгружен. Это полезно когда большой код CSS набирает размер файла.

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

qpurypaHT

17.09.2016 - 18:20

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

Принцип такой: я создал более распространенные классы CSS, типа: text-align:left/center/right;

а далее уже писал что-то в таком роде:)


<div class="floatL wh BOS bMenu-orange transition marginR8 text-center">
	<div id="mPadding" class="fBrouser transition"></div>
	Скачать браузер
</div>


<div id="RSS" class="transition">
	<div class="Date floatL2 bMenu-orange"><span>21</span><br />Мая</div>
	<div class="Title">Новая версия программы для учета расходов Family 11.5</div>
	<div class="Info"><img src="theme/design/ico/view.png" width="20px" height="auto" /> <sup>(344)</sup> <img src="theme/design/ico/lik2e.png" width="18px" height="auto" /> <sup>(34)</sup> <img src="theme/design/ico/comments2.png" width="17px" height="auto" /> <sup>(6)</sup></div>
<div class="Text transition">
		<p><b>Family 11.5</b> — полный набор инструментов для управления финансами в любой сфере: от ведения семейного бюджета и бизнес-финансов до инвестиций. Family предлагает уникальную на рынке отчётную систему, содержит около 30 форм отчетов.</p>
		<p>Купив <b>Family 11.5</b>, вы сможете сохранить любой отчет на своем компьютере, либо сразу же распечатать и проанализировать свою финансовую картину уже в любом удобном месте, не перегружая зрение чтением с монитора компьютера.</p>
		<p class="text-right"><a href="" title="Читать полностью: <ИМЯ СТАТЬИ>" class="bMenu-green">Читать полностью...</a></p>
	</div>
</div>

Вот результат, чистый CSS

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Быстрый ответ:

Здесь расположена полная версия этой страницы.