Issue
I would like to have "Hello" and the black box on the right centered exactly on the image. I dont want to use position: absolute; and top: %;. Please help me :(
How it looks now: https://imgur.com/a/vY4Qcpm
How I want it to look: https://imgur.com/a/ywkqrO2
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body style="margin: 0">
<img id="background" src="img/background.jpeg">
<div class="middle-part">
<p id="text">Hello</span></p>
<div id="field">
<div id="field-content"></div>
</div>
</div>
</body>
</html>
CSS
html {
scroll-behavior: smooth;
}
#background {
width: 100%;
height: 80vh;
object-fit: cover;
pointer-events: none;
}
.middle-part {
margin: 0 auto;
max-width: 1300px;
}
#text {
position: absolute;
margin: 0;
margin-left: 6px;
font-size: 50px;
}
#field {
display: flex;
justify-content: flex-end;
}
#field-content {
position: absolute;
margin-right: 10px;
width: 380px;
height: 275px;
background-color: black;
}
With position: absolute; and top: %; it seems to work but I am searching for a better solution.
I also tried to put the img into the middle-part below while using justify-content: center; but it won't work either.
Solution
Add a <section> element with a height of 80vh, use flexbox to position the contents, and reference the image in CSS as the background-image.
body {
margin: 0;
}
.s1 {
height: 80vh;
background-image: url(http://picsum.photos/id/85/1280/720);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.middle-part {
width: 1300px;
max-width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
#text {
font-size: 50px;
margin: 0;
}
#field-content {
width: 190px;
height: 100px;
background-color: black;
}<section class="s1">
<div class="middle-part">
<p id="text">Hello</p>
<div id="field">
<div id="field-content"></div>
</div>
</div>
</section>Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.