Разместить текст внизу по середине страницы HTML/CSS

Может быть на этот вопрос есть где-то ответ, но я ничего не нашел. Я делаю простенький сайт, можно сказать для изучения основ веб-программирования. Появилось желание сделать что-то типа текста копирайта, типа (c) CoolPerson — 2020 , и нужно разместить его снизу, по середине страницы как это делают обычно на сайтах. В гугле искал, текст размещался в снизу в углу, а мне нужно снизу и по середине. Есть возможность это сделать?

Отслеживать

11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков

Как прижать текст к низу блока?

Мужики, можно ли как-нибудь прижать текст к низу в том виде, в котором HTML, без обертываний в span, p, и div?

table-cell не помогает, тк ломаются сами родительские блоки, хотя текст к низу липнет.
Дело в том, что в этих двух блоках текст может быть как одно слово, так и в две строки.

• Вопрос задан более трёх лет назад
• 70831 просмотр

Комментировать

Решения вопроса 0

Ответы на вопрос 2

Тыжверстальщик! Наверстай мне упущенное.

Расположить текст внизу страницы!

Использую этот стиль, однако он выводит текст в нижний правый угол, как это мне надо, однако если высота страницы превышает разрешение экрана текст остаётся там же не опускаясь вниз страницы . как решить эту задачу!

1 2 3 4 5 6 7 8 9 10 11 12

style type="text/css"> #copyright < position: absolute; bottom: 1em; right: 1em; text-align: right; >/style> div id="copyright">Copyright © 2011. All rights reserved/div>

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Расположить фиксированное меню под футером и закрепить внизу страницы
Добрый день, я сверстал сайт типа "landing page",но мне надо сделать, так что бы когда пользователь.

Расположить Scroll внизу при открытии окна диалога
Как сделать так как в диалогах в вк, ты открыл диалог. И страница по дефолту внизу находится и ты.

Подвал внизу страницы
Тема дико банальна, но насущна. Сделал подвал по статьям с интернета, подвал прикреплён к низу.

O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681

position: absolute;

и добавьте

overflow:hidden;

Регистрация: 03.06.2011
Сообщений: 44

так а чтобы внизу страницы как сделать! а то так сделал и текс в верхнем правом углу стал отображаться!

O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681

margin-top:100%;

Регистрация: 03.06.2011
Сообщений: 44

не помогет! как то слишком вниз уходит запределы самой страницы, наверно 100% оно берёт не из расчёта страницы, а экрана!
дело в том, что у меня все страницы разной высоты . и поэтому наверно как-то иначе надо прописать . сам весь инет перекопал и ничего толкого ещё не нашёл

Регистрация: 26.09.2009
Сообщений: 298

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

Регистрация: 03.06.2011
Сообщений: 44
а можно примерчик с футером?
Регистрация: 26.09.2009
Сообщений: 298
да пожалуйста

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

 html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title>/title> meta name="keywords" content="" /> meta name="description" content="" /> link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> /head> body> div id="wrapper"> div id="header"> /div> div id="content"> /div> /div> div id="footer"> div id="copy"> Copyright © 2011. All rights reserved /div> /div> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

* { margin: 0; padding: 0; } html { height: 100%; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; height: 100%; } #wrapper { min-width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; } #content { padding: 0 0 100px; } #footer { min-width: 1000px; margin: -100px auto 0; height: 100px; position: relative; } #copy { padding-right:10px; padding-top:80px; float:right; }

Выравнивание текста

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца

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

Табл. 2. Выравнивание текста с помощью параметра align

Код HTML	Описание
Текст	Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
Текст	Выравнивание по центру.
Текст	Выравнивание по левому краю.
Текст	Выравнивание по правому краю.
Текст	Выравнивание по ширине.
Текст	Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст	Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег .
Текст	Выравнивание по центру.
Текст	Выравнивание по левому краю.
Текст	Выравнивание по правому краю.
Текст	Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.

Отличие между абзацем (тег

) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде . В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

      
Как поймать льва?
 
Метод перебора
 
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
 
Метод дихотомии
 
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
  

Результат примера показан на рис. 1.

Рис. 1. Выравнивание текста по правому и левому краю

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.