Центрировать форму внутри фонового изображения и рамки
У меня есть фоновый контейнер/поле под названием «поле вопросов», внутри этого поля у меня есть изображение. В этом контейнере/поле и изображении я хочу, чтобы поле формы/ввода находилось в центре этого поля.
.question-box {
width: 50%;
height: 400px;
/* make dependent on content inside */
/*padding: 50px;*/
margin: auto;
border: 10px solid #6c85bd;
box-sizing: border-box;
border-radius: 25px;
position: relative;
}
.question-box img {
width: 100%;
height: 100%;
border-radius: 15px;
object-fit: cover;
}
.question-box form {
display: block;
height: 50%;
position: absolute;
}
input {
width: 100%;
}<div class = "question-box">
<img src = "<?php echo htmlspecialchars($defaultImage2); ?>"></img>
<form class = "form" action = "" method = "post">
<input type = "text" name = "name" placeholder = "Name..">
<button type = "submit" name = "submit">Sign up!</button>
</form>
</div>Классы «вопрос-окно» и «img» не имеют каких-либо проблем.
Я пробовал большинство вещей, доступных при быстром поиске, однако, поскольку я знаю CSS, я не думаю, что сделал это правильно, и поэтому мой код не работает?
Ответы 2
Обновите свой CSS следующим образом:
.question-box form {
display: block;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Вы также можете централизовать, используя flex:
.question-box {
display: flex;
align-items: center;
justify-content: center;
}
При использовании flex используйте изображение с фоном.
.question-box {
background-image: url('your image url here');
}
Это централизует форму для вас.
Если единственной целью изображения является отображение в качестве фона блока, используйте для фона CSS вместо элемента img.
А поскольку изображение извлекается с помощью некоторого PHP-скрипта, используйте атрибут style для .question-box div и вставьте туда оператор php для свойства css background-image: ....;
Теперь, когда мы избавились от элемента img, используйте эти свойства CSS, чтобы центрировать .question-box контент:
.question-box{
/*Your previous properties*/
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
Не могли бы вы заменить вызов PHP реальным изображением, которое можно загрузить в демо-версию? Является ли изображение каким-то фоном или это контент, который должен присутствовать?