#css
#css
Вопрос:
Я не какой-либо CSS-профи. Но margin, похоже, не работает ни в каких других частях, кроме списка ul / li, приведенного ниже.
Я играл с позициями и другими divs.
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(184, 184, 184);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('/images/landing.jpg');
font-family: Montserrat;
}
.header {
top: 0;
position: fixed;
background-color: gray;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
}
.menu {
position: fixed;
top: 6px;
right: 0;
}
.menu ul li {
display: inline;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: lighter;
padding: 0 20px;
}
.welcome {
position: absolute;
color: white;
font-size: 50px;
top: 459px;
margin: auto;
}
HTML:
<div class='welcome'>
<span>Hello!</span>
</div>
Пытаюсь переместить приветствуемый div в центр
Ответ №1:
Вы устанавливаете margin: auto
для элемента с абсолютным расположением. Я полагаю, вы пытаетесь центрировать 'welcome'
элемент (согласно вашему вопросу, этот факт неясен). Элемент с абсолютным расположением зависит от положения и размера его предшественников.
Одно из многих решений для центрирования элемента с абсолютным расположением, если переместить его на 50% сверху и слева от его родительского элемента, а затем применить translate, чтобы переместить его в центр: top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)
.
Ответ №2:
положение класса приветствия является абсолютным, поэтому родительский класс приветствия должен располагаться относительно центра элемента приветствия. А также, если вы хотите расположить div по центру по горизонтали, вам следует изменить margin: auto;
на margin: 0 auto;
Или вы можете настроить отображение родительского div в flex, а затем использовать align-items, justify-content
to center
.
.parent { display: flex, align-items: center, justify-content: center }
Ответ №3:
Попробуйте изменить свой welcome
класс css на этот:
.welcome {
position: absolute;
left: 50%;
transform: translate(-50%);
}
Ответ №4:
Замените свой .добро пожаловать в класс css с этим css-кодом :
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(184, 184, 184);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('/images/landing.jpg');
font-family: Montserrat;
}
.header {
top: 0;
position: fixed;
background-color: gray;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
}
.menu {
position: fixed;
top: 6px;
right: 0;
}
.menu ul li {
display: inline;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: lighter;
padding: 0 20px;
}
.welcome {
left:50%; right:50%;
top:50%; bottom:50%;
position: absolute;
}
<div class='welcome'>
<span>Hello!</span>
</div>