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

This question already has an answer here:

How to horizontally center a <div> in another <div>? 82 answers

Vertically centering a div inside another div 23 answers

Flexbox: center horizontally and vertically 8 answers

---

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*/
}

---

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/

---

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

链接地址: http://www.djcxy.com/p/75886.html

上一篇: 将更小的div集中在更大的div中

下一篇: 如何把ap放在div的中心？