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

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>

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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>