Как сделать размеры блока относительными и как разместить текст по центру - HTML и CSS

Bulat Ibrahim · 07.07.2019, 22:26

Всех приветствую!
Давненько не занимался веб-программированием, и, похоже, подзабыл что-то...
Делаю блоки с размерами в процентном соотношении внутри блока, который изменяет свою величину по отношению к размерам окна браузера. Ширину внутренних блоков поставил 32% и разместил по 3 штуки на каждом ряду. Но вот при уменьшении размера браузера, ширина блоков сокращается, а высота - нет. Скажите пожалуйста, как сделать так (можно ли, без использования JS), чтобы высота задавалась относительно ширины блока (например, 60% от его ширины)?
И еще вопрос по выравниванию текста по вертикали. Допустим, имеем <a>текст</a>. <a> имеет свойство display: block и имеет свою ширину и высоту. На ссылке будет фоновое изображение, а снизу надпись "текст" (в данном примере). Вот как-то не могу я с display: block разместить текст снизу. vertical-align не работает, даже если line-height прописать.

Поможете с этими вопросами?

Вадим Мошев · 07.07.2019, 23:35

По первому вопросу. Не уверен, что смогу дать правильный ответ, но попробую. Установите для целевого блока свойство padding-top сколько-то процентов.

По второму вопросу. Есть два варианта решения.

Первый. Просто верстайте нужный блок с интересующим расположением текста. Далее его просто оборачивайте в ссылку. По современным стандартам так допустимо делать.

Второй вариант. Придумал сам. Так же верстаете блок с интересующим расположением текста. Далее внутри этого блока размещаете пустую ссылку (без текста внутри). В CSS ставите для ссылки абсолютное позиционирование, а параметры left, right, top, bottom установите в нулевое значение. У этого способа есть недостаток: внутри этого блока вы не сможете выделять текст.

Чтобы разместить текст по центру блока, могу посоветовать заключить его в дополнительный блок, для которого установить

Код:

width: inherit;
height: inherit;
display: table-cell;
vertical-align: middle;

web-coder · 09.07.2019, 19:15

Цитата:

Сообщение от Bulat Ibrahim

Скажите пожалуйста, как сделать так (можно ли, без использования JS), чтобы высота задавалась относительно ширины блока (например, 60% от его ширины)?

Вот пример, как это можно сделать http://www.mademyday.de/css-height-e...-pure-css.html

Второй вопрос легко решается с помощью flexbox.

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			width: 200px;
			height: 100px;
			padding: 10px;
			background: yellow;
		}
	</style>
</head>
<body>
	<a href="" class="box">Текст</a>
</body>
</html>

07.07.2019, 22:26	#1
Bulat Ibrahim Форумчанин Регистрация: 24.04.2015 Сообщений: 199	Как сделать размеры блока относительными и как разместить текст по центру Всех приветствую! Давненько не занимался веб-программированием, и, похоже, подзабыл что-то... Делаю блоки с размерами в процентном соотношении внутри блока, который изменяет свою величину по отношению к размерам окна браузера. Ширину внутренних блоков поставил 32% и разместил по 3 штуки на каждом ряду. Но вот при уменьшении размера браузера, ширина блоков сокращается, а высота - нет. Скажите пожалуйста, как сделать так (можно ли, без использования JS), чтобы высота задавалась относительно ширины блока (например, 60% от его ширины)? И еще вопрос по выравниванию текста по вертикали. Допустим, имеем <a>текст</a>. <a> имеет свойство display: block и имеет свою ширину и высоту. На ссылке будет фоновое изображение, а снизу надпись "текст" (в данном примере). Вот как-то не могу я с display: block разместить текст снизу. vertical-align не работает, даже если line-height прописать. Поможете с этими вопросами? Булат Азат улы

07.07.2019, 23:35	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	По первому вопросу. Не уверен, что смогу дать правильный ответ, но попробую. Установите для целевого блока свойство padding-top сколько-то процентов. По второму вопросу. Есть два варианта решения. Первый. Просто верстайте нужный блок с интересующим расположением текста. Далее его просто оборачивайте в ссылку. По современным стандартам так допустимо делать. Второй вариант. Придумал сам. Так же верстаете блок с интересующим расположением текста. Далее внутри этого блока размещаете пустую ссылку (без текста внутри). В CSS ставите для ссылки абсолютное позиционирование, а параметры left, right, top, bottom установите в нулевое значение. У этого способа есть недостаток: внутри этого блока вы не сможете выделять текст. Чтобы разместить текст по центру блока, могу посоветовать заключить его в дополнительный блок, для которого установить Код: `width: inherit; height: inherit; display: table-cell; vertical-align: middle;` Последний раз редактировалось Вадим Мошев; 09.07.2019 в 15:05.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сделать текст в консоли по центру C#	Vavavava	Помощь студентам	1	01.07.2018 21:51
После центрирования фиксированного блока по центру экрана не видно его текст	kamikadzedead	HTML и CSS	3	23.05.2018 12:25
Position: fixed - сделать размеры блока как у body	mr.relax	HTML и CSS	2	11.02.2018 13:10
Как при блочной верстке разместить текст по центру блока?	Michael_Ardan	HTML и CSS	4	29.08.2013 14:07
Как разместить текст внизу страницы по центру	Vitalik85	HTML и CSS	9	10.08.2012 14:32