How can i flex my png image with my h1 tag in my header

Question

I've tried display: flex align-items: center and its a no go. I need that image to be the left of travel. What am i doing wrong???

const Header = () => {
  return (
    <div className="header__container">
      <div className="header">
        <div className="header__left">
          <Link className="header__logo__link" to="/">
            <img
              className="header__logo"
              src="/images/headerlogo.png"
              alt="headerlogo"
            />
            <h1>Travel</h1>
          </Link>
        </div>
        <div className="header__mid">
          <input type="text" placeholder="search" />
        </div>
        <div className="header__right">
          <h1 className="header__right__login">Login</h1>
          <h1>Logout</h1>
        </div>
      </div>
    </div>
  );
};

.header__container {
  border-bottom: 1px solid lightgray;
  padding: 10px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-around;

  position: sticky;
  z-index: 100;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.header__left {
  display: inline-flex;
}

.header__logo {
  height: 50px;
  object-fit: contain;
}

.header__logo__link {
  text-decoration: none;
}

.header__logo__link h1 {
  color: black;
}

.header__mid input {
  max-width: 350px;
}

.header__right {
  display: flex;
}

.header__right__login {
  margin-right: 10px;
}

score 1 · Answer 1 · answered Jun 28 '21 at 05:23

1

You need to give these properties to the block with the image and h1 tags.

.header__logo__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

answered Jun 28 '21 at 05:23

ercüment

138
2
6

score 1 · Accepted Answer · answered Jun 28 '21 at 05:24

Why is the display: flex and align-items: center no go? I think it works.

I added

.header__logo__link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__logo__link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__container {
  border-bottom: 1px solid lightgray;
  padding: 10px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: sticky;
  z-index: 100;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.header__left {
  display: inline-flex;
}

.header__logo {
  height: 50px;
  object-fit: contain;
}

.header__logo__link {
  text-decoration: none;
}

.header__logo__link h1 {
  color: black;
}

.header__mid input {
  max-width: 350px;
}

.header__right {
  display: flex;
}

.header__right__login {
  margin-right: 10px;
}

<div class="header__container">
  <div class="header">
    <div class="header__left">
      <a class="header__logo__link" to="/">
        <img class="header__logo" src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Bsv-icon-small.png" alt="headerlogo" />
        <h1>Travel</h1>
      </a>
    </div>
    <div class="header__mid">
      <input type="text" placeholder="search" />
    </div>
    <div class="header__right">
      <h1 class="header__right__login">Login</h1>
      <h1>Logout</h1>
    </div>
  </div>
</div>

dam im a noob, i added the css to header__left. why do i have to add these properties to the link and not the actual header__left container? — HelpANoobOut, Jun 28 '21 at 05:30
`display: flex` has only effect on the div children (but not their children). Applying flex on `header__left` will only try to flex `Link` but as it is "alone" in the div, nothing special will happen. You want to do something with `img` and `h1` so find the first element wrapping them (in this case it was `Link` with style `header__logo__link`). — Pan Vi, Jun 28 '21 at 05:38

How can i flex my png image with my h1 tag in my header

2 Answers2