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: example@gmail.com</p>
        <p>Your user id: 123213213213</p>
        <p>Your display name: ASDSADASDSA</p>
      </div>
    </div>

enter image description here

coldasspirit
  • 127
  • 1
  • 11
  • 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](https://stackoverflow.com/a/33049198/11866037)) – Kaung Khant Zaw Jul 06 '21 at 10:38

3 Answers3

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'

Latha Nithin
  • 41
  • 6
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.

Sowam
  • 1,674
  • 3
  • 12
  • 30
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.

nico263nico
  • 126
  • 11