I have this react component:

const IslandDash = () => {
  return (
    <Wrapper>
      <div className="dashboard">
        <NavLink to={"/Blog"}>
          <div className="dash-item-container">
            <TbHome className="dash-items" />
            <p className="label-container">Home</p>
          </div>
        </NavLink>
      </div>
    </Wrapper>
  );
};

How do I center this p element beneath the TbHome Icon?

Here is the code for the Wrapper css:

import styled from "styled-components";

const Wrapper = styled.section`
  .dashboard {
    width: max-content;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--foreground);
    color: var(--primary-dark);
    border-radius: var(--border-radius);
    margin: auto;
    margin-top: 30px;
    padding: 0px 30px;
    column-gap: 20px;
  }
  .translate {
    padding: 0px 20px;
    position: absolute;
    top: 0;
    right: 100px;
  }

  .dash-items {
    width: 30px;
    height: 30px;
    color: var(--primary-dark);
    stroke-width: 1.5;
    transition: transform 185ms ease-in-out;
  }
  .dash-items:hover {
    color: var(--primary-light);
    cursor: pointer;
    transform: translateY(-5px) scale(1.1);
  }

  .label-container {
    border-color: red;
    border-style: solid;
    color: var(--primary-light);
  }
  .dash-item-container {
    border-color: green;
    border-style: solid;
    display: grid;
  }
`;
export default Wrapper;

I tried position Absolute, which is not viable here as it wouldn't be responsive. My next thought was to use grid, but that did not work either. You can see the results below:

intended design

my result

I added border color so you can visualize the divs.

I have this react component:

const IslandDash = () => {
  return (
    <Wrapper>
      <div className="dashboard">
        <NavLink to={"/Blog"}>
          <div className="dash-item-container">
            <TbHome className="dash-items" />
            <p className="label-container">Home</p>
          </div>
        </NavLink>
      </div>
    </Wrapper>
  );
};

How do I center this p element beneath the TbHome Icon?

Here is the code for the Wrapper css:

import styled from "styled-components";

const Wrapper = styled.section`
  .dashboard {
    width: max-content;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--foreground);
    color: var(--primary-dark);
    border-radius: var(--border-radius);
    margin: auto;
    margin-top: 30px;
    padding: 0px 30px;
    column-gap: 20px;
  }
  .translate {
    padding: 0px 20px;
    position: absolute;
    top: 0;
    right: 100px;
  }

  .dash-items {
    width: 30px;
    height: 30px;
    color: var(--primary-dark);
    stroke-width: 1.5;
    transition: transform 185ms ease-in-out;
  }
  .dash-items:hover {
    color: var(--primary-light);
    cursor: pointer;
    transform: translateY(-5px) scale(1.1);
  }

  .label-container {
    border-color: red;
    border-style: solid;
    color: var(--primary-light);
  }
  .dash-item-container {
    border-color: green;
    border-style: solid;
    display: grid;
  }
`;
export default Wrapper;

I tried position Absolute, which is not viable here as it wouldn't be responsive. My next thought was to use grid, but that did not work either. You can see the results below:

intended design

my result

I added border color so you can visualize the divs.

• html
• css
• reactjs

1 Answer 1

Just add text-align: center; to the .dashboard class.

Here it is in action:

.dashboard, div[classname="dashboard"] {
    width: max-content;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--foreground);
    color: var(--primary-dark);
    border-radius: var(--border-radius);
    margin: auto;
    margin-top: 30px;
    padding: 0px 30px;
    column-gap: 20px;
    text-align: center; /*this is the essence*/
  }
  .translate {
    padding: 0px 20px;
    position: absolute;
    top: 0;
    right: 100px;
  }

  .dash-items, div[classname="dash-items"] {
    width: 30px;
    height: 30px;
    color: var(--primary-dark);
    stroke-width: 1.5;
    transition: transform 185ms ease-in-out;
  }
  .dash-items:hover, div[classname="dash-items"]:hover {
    color: var(--primary-light);
    cursor: pointer;
    transform: translateY(-5px) scale(1.1);
  }

  .label-container, p[classname="label-container"] {
    border-color: red;
    border-style: solid;
    color: var(--primary-light);
  }
  .dash-item-container, div[classname="dash-item-container"] {
    border-color: green;
    border-style: solid;
    display: grid;
  }

const IslandDash = () => {
  return (
    <Wrapper>
      <div className="dashboard">
        <NavLink to={"/Blog"}>
          <div className="dash-item-container">
            <TbHome className="dash-items" /><img src="https://i.sstatic/pY8PYtfg.png"></TbHome>
            <p className="label-container">Home</p>
          </div>
        </NavLink>
      </div>
    </Wrapper>
  );
};

Image used in the code: