HTML не центрируется
Привет, я хочу попробовать, чтобы этот заголовок был в центре. как показано здесь, он просто не идет в центр, и это меня очень раздражает. скриншот проблемы: https://i.imgur.com/tJhbKS1.jpg
Если есть так или иначе, в котором вы также можете сделать это лучше, это было бы здорово. Моя цель в конечном итоге сделать так, чтобы центральная рамка растягивалась на 100% экрана вниз.
Моя основная задача в этом посте — сделать так, чтобы текст в центральном поле основного текста имел заголовок.
тестовое задание
to be in the centre and then theтестовое задание
to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.Я также хочу, чтобы коробка была зафиксирована там, где она есть, и никогда не двигалась.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "./css/header.css">
<link rel = "stylesheet" type = "text/css" href = "./css/site.css">
</head>
<body>
<ul class = "navbar">
<li><a href = "#home">Home</a></li>
<li><a href = "#news">About</a></li>
<li><a href = "#contact">Contact</a></li>
<li style = "float: right; "><a href = "#about">Login</a></li>
</ul>
<div class = "body-container">
<div class = "menu">
<div class = "title">
<h1>test</h1>
</div>
<div class = "body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Ответы 3
Удалите padding-left:50%; из .body-container .menu .title, чтобы центрировать заголовок. Кроме того, вы использовали display:flex, это может привести к тому, что подстрока не будет центрирована.
Взгляните на этот Codepen.https://codepen.io/dmnktoe/pen/wOyxor
(Обновление: я бы рекомендовал вам не использовать абсолютную позицию для вашего элемента, так как он не очень отзывчив.)
Yh или даже налево было бы здорово
Обновил мой ответ. Если вы хотите, чтобы подстрока была выровнена по левому краю, переключите «центр» влево.
Спасибо большое
Я пробовал это и работал:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
Спасибо большое
Рад помочь. Пожалуйста, проверьте ответ, если это помогло :)
Я всегда использую margin: 0 auto; и это работает почти всегда
ты тоже хочешь по центру?