How do I center 1 paragraph element in 1 div element?

Question

I'm following this SO post here and the p element is not centering.

Basically I gave the containing div a width and height and then set text align attribute to center for the p element inside the div. No go.

What can I try next?

The containing div is id=Y1aa

I only need horizontal centering for now.

#Y1 {
  z-index: 4000;
  position: relative;
  width: 100%;
  height: 30px;
  background: #ffffff;
  opacity: .95;
}
#Y1a {
  position: relative;
  width: 320px;
  height: 30px;
  margin: 0 auto;
  border-left: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
#Y1aa {
  position: relative;
  width: 320px;
  height: 30px;
  top: 5px;
}
.top {
  color: #000000;
  display: inline;
  font-size: 9px;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  text-align: center;
  line-height: 10px;
}

<div id='Y1'>
  <div id='Y1a'>

    <div id="Y1aa">
      <p class="top">Foo</p>
    </div>
  </div>
</div>

@cadegalt It's better to post the code then to make us go to the site and use web inspector — UnknownOctopus, Aug 19 '15 at 20:13
@cadegalt Change `display:inline` to `display:block` in your `top` class — UnknownOctopus, Aug 19 '15 at 20:16
@cadegalt oh. sorry it's `position: absolute`. You can add to you `.top` class this: `display: block; text-align: center;`. — AleshaOleg, Aug 19 '15 at 20:19
it's centering in the fiddle with text-align center he just needs to close the other div tags http://jsfiddle.net/o7dLmv7w/ — Rachel Gallen, Aug 19 '15 at 20:20

AleshaOleg · Answer 1 · 2015-08-19T20:27:50.307

1

You can remove from your .top class this: display: inline;.

#Y1 {
  z-index: 4000;
  position: relative;
  width: 100%;
  height: 30px;
  background: #ffffff;
  opacity: .95;
}
#Y1a {
  position: relative;
  width: 320px;
  height: 30px;
  margin: 0 auto;
  border-left: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
#Y1aa {
  position: relative;
  width: 320px;
  height: 30px;
  top: 5px;
}
.top {
  color: #000000;
  font-size: 9px;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  text-align: center;
  line-height: 10px;
}

<div id='Y1'>
  <div id='Y1a'>

    <div id="Y1aa">
      <p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
    </div>

edited Aug 19 '15 at 20:27

answered Aug 19 '15 at 20:20

AleshaOleg

2,131
13
28

Incidentally, you can just remove `display:inline` rather than adding `display:block`. `
` elements typically [default to block-level](http://www.w3.org/TR/html-markup/p.html).
– showdev Aug 19 '15 at 20:24
@showdev oh, really:) It this case yes. But in first edition of question - I get code from [this](http://stackoverflow.com/questions/15121343/how-to-center-a-p-element-inside-a-div-container) question and subconsciously work with this code:) – AleshaOleg Aug 19 '15 at 20:27
@showdev I'm a little bit confused - because in first example he has ` position: absolute` and there we should add `display: block;` – AleshaOleg Aug 19 '15 at 20:29
It doesn't hurt to add it, I just don't think it's necessary because the default display mode for `
` elements is `block`.
– showdev Aug 19 '15 at 20:33

score 1 · Accepted Answer · answered Aug 19 '15 at 20:22

1

Change display:inline to display:block in your top class, or delete the display style all together.

answered Aug 19 '15 at 20:22

UnknownOctopus

1,827
1
12
26

score 1 · Answer 3 · answered Aug 19 '15 at 20:31

Alternatively, you could add text-align: center to #Y1aa if you need to keep the p as an inline element.

#Y1 {
  z-index: 4000;
  position: relative;
  width: 100%;
  height: 30px;
  background: #ffffff;
  opacity: .95;
}
#Y1a {
  position: relative;
  width: 320px;
  height: 30px;
  margin: 0 auto;
  border-left: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
#Y1aa {
  position: relative;
  width: 320px;
  height: 30px;
  top: 5px;
  text-align: center;
}
.top {
  color: #000000;
  display: inline;
  font-size: 9px;
  font-weight: bold;
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  text-align: center;
  line-height: 10px;
}

<div id='Y1'>
  <div id='Y1a'>
    <div id="Y1aa">
      <p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
    </div>
  </div>
</div>

score -2 · Answer 4 · answered Aug 19 '15 at 20:19

-2

To center a paragraph inside a div you will have to use the margin attribute in the CSS style for the paragraph

In this example i am centering the first paragraph inside the div with class 'wrap'

 .wrap p:first-child {
     text-align:center;
     margin: 0 auto;
 }

 <div class="wrap">
     <p>Some p tag</p>
 </div>

answered Aug 19 '15 at 20:19

Dan-Levi Tømta

786
3
13
27

1

his `
` is `position: absolute`
– AleshaOleg Aug 19 '15 at 20:20
And why should it? The question clearly reads: How do I center 1 paragraph element in 1 div element? This is a perfectly good answer to that question. Now the OP can apply this method to the code the OP have. – Dan-Levi Tømta Aug 19 '15 at 20:21

How do I center 1 paragraph element in 1 div element?

4 Answers4