I can't seem to find a way to center a div element within a section within background image

HTML-CSS
1

I’ve been trying to make the welcome text div to center horizontally and vertically within the section that has the violin image background. I tried using margin:auto within a give height but it doesnt seem to work. I tried to check the box of the welcome-text div by giving it border with border-color:black border-width: 10px but the border doesnt show either. Is there something I’m missing here?
Also if someone can give me tips to structure my code better I will appreaciate it. I struggle find a good approach due to my inexperience.

The code:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<header id="header">
  <div id="header-img"> <!--make this group flex--><!--insert image-->
    <div id="logo-text">
      Violinify
    </div>
  </div>

  <nav id="nav-bar">
    <ul id="nav-container"> <!--flex-->
      <li class="nav-link"><a ref="#">About</a></li>
      <li class="nav-link"><a ref="#">Pricing</a></li>
      <li class="nav-link"><a ref="#">FAQ</a></li>
    </ul>
  </nav>  
</header>

<section>
  <div id="welcome-text">
    Welcome text
  </div>
</section>

<body>
  <div id="video-text">
      Check Out Our Session
  </div>
  <div id="video-container">
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"  frameborder="0" allowfullscreen></iframe>
  </div>
  
  <div id="pricing-container">
      <div class="pricing box">
        <h1>Peasant</h1>
      </div>
      <div class="pricing box">
        <h1>Merchant</h1>
      </div>
      <div class="pricing box">
        <h1>Noble</h1>
      </div>
  </div>

  <form>
    <label id="email-label">
      Interested? Contact Us!
    </label>
    <input type="email" id="email" name="email" placeholder="Enter our email here">
  </form>

</body>

<footer>
  This is footer
</footer>
</html>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Playfair+Display&display=swap');

html body{
  margin:0;
  padding:0;
}

*{
  color:#FFF;
  font-family: "Playfair Display", serif;
}
header{
  position:fixed;
  /*top:0;
  left:0; */
  width:100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.1);
  ;
}

#header-img{
  float:left;
  display:flex;
}

#nav-bar{
  float:right;
}
#logo-pic{
  height:100px;
  
}

#logo-text{
  font-size: 30px;
}

nav ul{
  list-style: none;
  float:right;
  display:flex;
}

section{
  background: url('https://s3-ap-southeast-2.amazonaws.com/ish-oncourse-scc/3826cfee-4658-4f82-a72d-f16a322862a7');
  background-size:cover;
  background-position: center;
  width: 100%;
  height: 50vh;
  z-index: -1;
}

#welcome-text{
  
  
}

body {
  background-color:rgb(4, 41, 58) ;
}

#video-section{


}

#video-container{
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
  flex-grow: 1;
}

#video-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
}

#video-text{
  flex-grow: 1;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

hopefully this solves your problem
all you needed to do was make the image section a flexbox and justify and align items to center
but not gonna lie that took me more than i expected to figure out the solution

1 Like
3

I eventually tried that solution, and yes it does work! Thank you for your reply my friend, happy coding!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.