1

i need your help. I have profile page, i researched lots of websites, but i can't found, can you help me? I need to center all all of the items, and my image has to be like ANGELA YU (image of the top, you can see). Please help

 <div className="asd">
    <img alt="123" src={asd}></img>
      <div className="top-container">
        <div></div>
        <div className="user-profile-img">
          <img alt="profileImg" src={user.photoURL}></img>
        </div>
      </div>
      <div className="middle-container">
        <p>Your email: [email protected]</p>
        <p>Your user id: 123213213213</p>
        <p>Your display name: ASDSADASDSA</p>
      </div>
    </div>

enter image description here

1
  • Use text-align: center if you have 100% width, otherwise use margin: 0 auto; or if you want to center both vertically and horizontally, use flexbox properties (ref) Commented Jul 6, 2021 at 10:38

3 Answers 3

1
  1. Try to create a common class .textCenter{text-align:center} and use it in the each parent <div> example <div className="middle-container textCenter"> the all the child elements in this will be aligned center to that <div>.

  2. If you want the name in 2 lines as you shown in the above sample image then you need to give max-width to the name tag example: max-width:'50px'

Sign up to request clarification or add additional context in comments.

Comments

0

Just add text-align:center to the classes that you want the text to be centered. Here you can see how to center an image. Just google.

Comments

0

I suggest using flexbox.

You can wrap the content you want to center in a div, and apply this CSS to it :

display:flex;
justify-content:center;

Here is a cool website to learn flexbox.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.