how to put a p at the center of a div?

Question

I have a popup window and I have 2 <p> within a <div> the div has padding-left & padding-right and I want to put the p tags in the center of the div. how should I do it?

here is the code:

<div class="sign"><p class="sign_text"> ' + sign + '</p> <p class="sign_text"> ' + this.sender + '</p> <div>

the style

'.sign{padding-left: ' + this.sign_padding_left + ';' +
  'padding-right: ' + this.sign_padding_right + ' +; font-family: IRANSharp;}' + 
  '.sign_text{margin-bottom: 0px; text-align: center}</style>'

Arvind Muthuraman · Accepted Answer · 2018-04-25T07:38:23.430

2

Add this css

.sign{
  display: flex;
  flex-direction: column;
  justify-content: center; // align horizontally center
  aligns-items: center;  // align vertically center
}

Edit 1: Based on the image you have added

.sign{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

p{
  display:block;
  text-align:center;
  width: 80%; /*Change this for left adjustment*/
}

edited Apr 25 '18 at 07:38

answered Apr 24 '18 at 19:25

Arvind Muthuraman

2,957
1
12
11

but I put the div at the center of the page, I want to have special paddings but the p tags are not centered under each other – fariba.j Apr 25 '18 at 05:00
Can you elaborate more and create a working plunker? – Arvind Muthuraman Apr 25 '18 at 05:18
I added an image, I want two texts to be like that but not at the center of the page, I want them to have left padding from the page – fariba.j Apr 25 '18 at 05:33
add padding-left to .sign. Change `justify-content: center;` to `justify-content: flex-start;` Hope this is what you expecting. – Arvind Muthuraman Apr 25 '18 at 05:56
still not working – fariba.j Apr 25 '18 at 07:03
I have updated the answer based on the image you have added. – Arvind Muthuraman Apr 25 '18 at 07:39
yes it works with adding width but i did it with a table and it works – fariba.j Apr 25 '18 at 09:48

score 0 · Answer 2 · answered Apr 24 '18 at 19:24

This to me is a great use for flexbox.

Try something like this:

div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

p { // use a class obviously
  display: inline-block;
}

This is a great resource for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 0 · Answer 3 · answered Apr 24 '18 at 19:28

0

Just add { display: block; } to .sign class then text-align will work.

answered Apr 24 '18 at 19:28

MontyGoldy

739
1
13
25

how to put a p at the center of a div?

3 Answers3