Make text in the center of a div

Question

Thats not a div I want I just cant get to post it because it does not meet some requirement. I have never used anything like that before, just need help for a college project that requires programming. I have this: enter image description here

I just want the text to be centered. jsfiddle .net /etr1ok47/#&togetherjs=VfasppUOxh

Usually , you can adjust the `line-height` or `padding-top` in order to make it centralized vertically . — Ashraf, Jul 03 '18 at 03:36

DucCM · Answer 1 · 2018-07-03T03:16:48.053

1

using flex in this-p class:

display: flex;
flex-direction: column;
justify-content: center;

edited Jul 03 '18 at 03:16

answered Jul 03 '18 at 03:10

DucCM

21
3

hello, it worked but then each circle got into one paragraph.. i tried removing
but they one overlay each other https://ibb.co/iZTjBd
– beautyandthebeast Jul 03 '18 at 13:57

OneLiner · Answer 2 · 2018-07-03T03:09:47.160

0

You can add padding to the top of your p element in css if you are needing the words in the circle to be vertically better centered.

p.this-p{
    vertical-align: middle;
}

If the problem is the p itself not centering in the li element then define the parent with display: table and the element itself with vertical-align: middle and display: table-cell

edited Jul 03 '18 at 03:09

answered Jul 03 '18 at 02:51

OneLiner

521
2
6

padding does not seem to take effect – beautyandthebeast Jul 03 '18 at 02:56
What is display set to? p element should accept padding. Is the circular border applied to the p element or the container? – OneLiner Jul 03 '18 at 03:04
Look at the last part of my answer. You can apply vertical-align. – OneLiner Jul 03 '18 at 03:10

score 0 · Answer 3 · answered Jul 03 '18 at 03:00

0

Try applying the following to your containing div (.parent) and the wrapper around your text (.child).

.parent {
  height: 300px;
  line-height: 300px;
  text-align: center;
}
.child {
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
}

answered Jul 03 '18 at 03:00

Steve Mulvihill

680
5
13

child would be the -span? – beautyandthebeast Jul 03 '18 at 03:01
Yes .child would be the span around the text you want to center vertically – Steve Mulvihill Jul 03 '18 at 03:05

score -1 · Answer 4 · answered Jul 03 '18 at 03:13

-1

p.this-p{ vertical-align: middle; align: center}

Above is when you use p element with padding. Same is applicable for other element

answered Jul 03 '18 at 03:13

rkoots

319
3
4

Make text in the center of a div

4 Answers4