@Kostylev2021

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

Как расположить див внутри дива в котором надпись чтобы надпись была по середине (сверху и с лева) и что бы внутренний див тоже был по середине ?
Если можно объясните как сделать с дивами без таблицы если с дивами нельзя то как с таблицей это сделать .
Пробовал с помощью 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>
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 3
Avilona
@Avilona
https://codepen.io/avilona/pen/zYZvpWy
можно с помощью флексов или гридов
Ответ написан
@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>
Ответ написан
@karmyskove
Если ты не хочешь использовать flex и grid, можно написать:
position: absolute;
left: calc(50% - половина ширины div);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы