Question 297942 in Html Question posted in
Some basic documentation can be found here.

Html – Center elements over img

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.

Tags:

2

Answers


  1. 0

    To place another element above another, you basically would want to use position having the parent element have a value of relative and the child absolute as so:

    <div class="parent">
 <img class="random-img" src="https://c4.wallpaperflare.com/wallpaper/1000/657/147/random-hd-wallpaper-thumb.jpg" alt="random" />
 <h3 class="child">Hello world!</h3>
</div>


    .parent {
  height: 400px;
  width: 400px;
  position: relative;
}

.random-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

    Find your solution in this codepen and adjust it to suit your needs

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search