I have a background container/box called “question-box”, inside this box I have an image. On this container/box and image I want a form/input box to be in the centre of this box.
.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>The Classes “question-box” and “img” don’t have any relevant problems.
I have tried majority of things accessed in quick searching, however because I am knew to CSS I don’t think I did it correctly and that is why my code isn’t working?
1
If the image’s sole purpose is to be rendered as the box’s background, use CSS for the background instead of the img element.
And since the image is fetched with some php script, then use the style attribute for the .question-box div and inject the php statement there for the css property background-image: ....;
Now that we got rid of the img element, use these css properties to center you .question-box content:
.question-box{
/*Your previous properties*/
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
Update your css with this:
.question-box form {
display: block;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can also centralize using flex:
.question-box {
display: flex;
align-items: center;
justify-content: center;
}
With flex, use the image has the background.
.question-box {
background-image: url('your image url here');
}
This will centralize the form for you.