Задать вопрос
@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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Голосовой браузерный ИИ ассистент
14 нояб. 2024, в 23:04
1500 руб./в час
Найти параметр, который укажет на вмешательство в PDF файл (подделка)
13 нояб. 2024, в 21:05
50000 руб./за проект
Разработать сайт компании
14 нояб. 2024, в 22:05
50000 руб./за проект
Ещё заказы