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

Header in css not as expected – Html

I’m new in CSS/HTML and I can’t make the design that I want.
HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/layout.css">
</head>
<body>
  <div class="header">
    <a href="index.html"><div class="logo"></div></a>
    <input type="text" class="search-bar" placeholder="Type...">
  </div>
  
</body>
</html>

CSS:

.logo {
  width: 80px;
  height: 80px;
  background-image: url('../assets/images/logo.jpeg');
  background-size: cover;
  margin-right: 20px;
}

.search-bar {
  width: 50%;
  height: 50%;
  border: 1px solid gray;
  border-radius: 20px;
  padding: 10px;
  margin: 0 auto;
  font-size: 1em;
}

Photo (I would like the logo to be centered, next to the search bar):
Desired design

Thanks!

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was in the

    margin: 0 auto;

    Hope it helps someone!


  2. 0

    You can use display:flex and justify-content: center in your .header div to center the elements in the center; Add a margin-right to the logo to give a space between the logo and search bar

    .header {
display: flex;
justify-content: center;
}

.logo {
width: 80px;
height: 80px;
background: url('https://via.placeholder.com/80') no-repeat;
margin-right: 10px;
}
    <!DOCTYPE html>
<html>
<body>
  <div class="header">
    <a href="index.html"><div class="logo"></div></a>
    <input type="text" class="search-bar" placeholder="Type...">
  </div>
  
</body>
</html>
    Login or Signup to reply.
  3. 0

    I’m kinda new to web dev too, but this should work:

    .header{
text-align: center;
}
    Login or Signup to reply.
  4. 0

    There are many ways to achieve your desired output. One of the ways using flex. You can also have a look at FLEX: A simple visual cheatsheet for flexbox.

      display: flex;
  align-items: center;
  justify-content: center;

    Click on this CodePen to see the full code.

    Besides, you can also have a look at the link below to see the issue & solution visually: StackOverFlow QA – Header in css not as expected

    Happy coding 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search