Я создал целевую страницу, как показано ниже:
Я помещаю текст и кнопки в контейнер div, и выравнивание выполняется правильно, но я пытаясь переместить его ниже lo go, чтобы он выглядел естественно лучше. Я пытался использовать bottom для регулировки положения, но это ничего не отражает.
Мой код:
<body style="font-family:Verdana;color:#aaaaaa;">
<div class="backgroundImage logo">
<a href="/registrations/dealer " class="btn grad1" style="float:right;"><b>{{ __('SIGN UP AS A DEALER') }}</b></a>
<div class="container" >
<h1 > A home is made of <i>
<p >hopes</p></i> and <i><p >dreams</p> </i>
</h1>
<h1 >Let us<i> <p >inspire</p></i> you to build the perfect home!</h1> <br>
<a href="/login " class="btn grad1" ><b>{{ __('LOGIN') }}</b></a>
<a href="/register" class="btn grad1"><b>{{ __('SIGN UP') }}</b></a>
</div>
</div>
</body>
SASS:
.backgroundImage {
background-image: url(/images/homepage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
* {
box-sizing: border-box;
}
a.btn {
color: black;
border-radius: 10px;
background-color: #fbcc34;
}
h1 {
color: white;
}
.a {
top: 50%;
}
p {
display: inline;
font-size: 75px;
font-family: "Dancing Script" cursive;
font-family: "Tangerine", cursive;
}
text-align: center;
position: relative;
top: 50%;
// Add media query for mobile devices
@media (max-width: 767px) {
h1 {
font-size: 120%;
float: left;
}
p {
font-size: 170%;
}
.backgroundImage {
background-image: url(/images/homepage.jpg);
background-repeat: no-repeat;
background-position: center;
}
}
Может кто-нибудь указать почему он не позиционируется по центру?
Редактировать: позиционирование теперь фиксированное, но, однако, когда я переключаюсь на мобильную раскладку, оно выглядит следующим образом:
Как мне центрировать первое предложение?