CODEWITHSUNDEEP
javascriptcssreactjsresponsivejustify
crvxッ
crvxッ

Reputation: 93

Responsive content alignment react js / css

I have a problem with react js. I have 2 Links and an image. I want the children props to be at the middle of the page (justify-content: center) and another link + image to be at the right position with the help of css.

header.js:

import styles from "./Header.module.css"
import React, {useState} from "react";
import Image from "next/image";
import Link from "next/link";

export default function Header({children}) {

return (
    <>
        <header className={styles.header}>
            {children}
            <Link id="link" href="/" passHref>
            Standort
        </Link>
            <Image src={"/location_on_FILL0_wght400_GRAD0_opsz48.png"} width={50} 
            height={50}></Image>

        </header>
    </>
)

}

css:

.header {
position: sticky;
top: 0;
width: 100%;
padding: 0.5em;
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
display: flex;
background-color: white;
justify-content: center;
}


.header > a {
color: black !important;
font-weight: bold;
font-size: 2em;
text-decoration: none;
 }

.link {
justify-content: right;
}

.header > a:hover {
text-decoration: underline;
  }

The Image and the Link Standort should be at the right position. And the props should be at the center like this (Ignore the Hamburger Menu).

Upvotes: 0

Views: 505

Answers (2)

hygtfrde
hygtfrde

Reputation: 130

It looks like you have used an ID selector (#link) instead of a class selector (.link)

import styles from "./Header.module.css";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";

export default function Header({ children }) {
  return (
    <>
      <header className={styles.header}>
        <div className={styles.childrenContainer}>{children}</div>
        <div className={styles.rightContent}>
          <Link href="/" passHref>
            <a className={styles.link}>Standort</a>
          </Link>
          <Image src={"/location_on_FILL0_wght400_GRAD0_opsz48.png"} width={50} height={50} />
        </div>
      </header>
    </>
  );
}

Also, use space-between to achieve the desired flex alignment, applied to the .header class:

.header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 0.5em;
  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
  display: flex;
  background-color: white;
  justify-content: space-between; /* Adjust alignment between children and right content */
}

.childrenContainer {
  display: flex;
  align-items: center; /* Align children vertically in the middle */
}

.rightContent {
  display: flex;
  align-items: center; /* Align right content vertically in the middle */
}

.link {
  color: black !important;
  font-weight: bold;
  font-size: 2em;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

Upvotes: 1

sirugh
sirugh

Reputation: 334

Have you considered using display: flex with justify-content: space-between?

<div class="header">
  <div></div>
  <div></div>
  <div></div>
</div>

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

.header div {
  width: 100px;
  height: 100px;
}

Upvotes: 1

Related Questions