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

Share Improve this question Follow edited Nov 17, 2024 at 3:37 Zheng Jiawen asked Nov 17, 2024 at 3:36 Zheng JiawenZheng Jiawen 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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: