0

All tags are in the center except the img I want to make is in the center with out using margin or padding

header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
}


/* after this I got the problem */

.main-menu ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  list-style: none;
}
<header>
  <div class="nav">
    <img src="logo.jpg" alt="Logo" class="logo">
    <nav class="main-menu">
      <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
      </ul>
    </nav>
  </div>
  <div class="title">
    <h1>Hi, we are <span>Lorem ipsum dolor</span>.<br>consectetur adipisicing elit.</h1>
    <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
  </div>
  <div class="button">
    <button type="button">button1</button>
    <button type="button">button2</button>
  </div>
</header>
j08691
  • 204,283
  • 31
  • 260
  • 272
Unknown
  • 187
  • 7

1 Answers1

1

You can define your ".nav" class with "text-align: center" to center the logo.

<!-- css -->
header {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.logo {
 border-radius: 50%;
 border: 1px solid #9C6;
 width: 100px;
 height: 100px;
 margin: 10px 0 0 10px; 
}

.main-menu ul {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 30px;
 list-style: none;
}

.nav {
 text-align: center;
}

<!-- html -->
<header>
<div class="nav">
<img src="logo.jpg" alt="Logo" class="logo">
<nav class="main-menu">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
  </ul>
</nav>
</div>
<div class="title">
<h1>Hi, we are <span>Lorem ipsum dolor</span>.<br>consectetur adipisicing elit.</h1>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
</div>
<div class="button">
<button type="button">button1</button>
<button type="button">button2</button>
</div>
</header>

https://jsfiddle.net/jasonbruce/wx3om05k/

Jason Bruce
  • 309
  • 1
  • 9