Horizontal alignment with CSS

Question

I have the following code:

<div class="one">
   <p>Test<p><span style="color: Green">▼</span>
</div>

This is a really easy question I think but I don't know CSS. How can I make the paragraph appear aligned horizontal in the center?

Answer 1

There are two issues here.

1. To center the DIV that contains the paragraph.
2. To center the paragraphs that come within the DIV.

To center the DIV, here's the code using inline styling:

<div style="margin: 0 auto" class="one">
    <p>Test<p>
</div>

The above will center the whole DIV but NOT align the text to the center. Again, the div will only get centered if the class "one" has a width specified. Otherwise, it has no effect. You can also include the margin style info inside the class named "one".

Now, to align all text that appear within the DIV horizontally, you can style it like this:

<div style="text-align: center" class="one">
    <p>Test<p>
</div>

And if you want to apply the centering style only for a single paragraph, you can include the the style rule within the <p> tag.