Задать вопрос
@Kostylev2021
html

Как центрировать див с текстом?

Как расположить див внутри дива в котором надпись чтобы надпись была по середине (сверху и с лева) и что бы внутренний див тоже был по середине ?
Если можно объясните как сделать с дивами без таблицы если с дивами нельзя то как с таблицей это сделать .
Пробовал с помощью table-cell 
.block{
	background-color:red;
	width:300px;
	height:300px;
	position:relative;
	text-align:center;
}
.innerblock{
	text-align:center;
	
	background-color:black;
		width:100px;
	height:100px;
	
	
	
	vertical-align:middle;
display: table-cell;

}
p{
	
	color:white;
}

<!doctype html>
<html>
<head>
     <meta charset="UTF-8">
	 <link rel="stylesheet" href="style.css">
	 
</head>
    <body>
    <div class="block">
	<div class="innerblock">
	<p> some text </p>
	</div>
	
	</div>
    </body>
</html>
  • Вопрос задан
  • 134 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
@karmyskove
Если ты не хочешь использовать flex и grid, можно написать:
position: absolute;
left: calc(50% - половина ширины div);
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Avilona
@Avilona
https://codepen.io/avilona/pen/zYZvpWy
можно с помощью флексов или гридов
Ответ написан
3 комментария
3 комментария
@Kostylev2021 Автор вопроса
разобрался сам 
.block{
	background-color:red;
	width:300px;
	height:300px;
	position:relative;
	text-align:center;
	position:relative;

}
.innerblock{
	text-align:center;
	
	background-color:black;
		width:100px;
	height:100px;
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	


}
p{
   
	
	color:white;
	
}
.fix{
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

<!doctype html>
<html>
<head>
     <meta charset="UTF-8">
	 <link rel="stylesheet" href="style.css">
	 
</head>
    <body>
    <div class="block">
	<div class="innerblock">
	<div class="fix">
	<p> some text </p>
	</div>
	</div>
	
	</div>
    </body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Копия форума на XenForo 2 + автоматический парсинг нового контента
26 нояб. 2024, в 17:25
30000 руб./за проект
SЕО продвижение сайта в топ 1
26 нояб. 2024, в 16:51
1000 руб./за проект
Сделатьт дизайн лендига и сверстать его на Тильде
26 нояб. 2024, в 16:49
30000 руб./за проект
Ещё заказы