CODEWITHSUNDEEP
css
Derek J
Derek J

Reputation: 151

Horizontal alignment with CSS

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?

Upvotes: 3

Views: 36855

Answers (5)

cwhelms
cwhelms

Reputation: 1771

your page should have this on it at the top inside the <head> tag

    <style type="text/css">
        .one p {text-align:center;}
    </style>

If you want to center the entire div, and not the text, use this but be sure to set a width for the div.

    <style type="text/css">
        .one p {margin:0 auto; width:300px;} /*Change the width to what you need to*/
    </style>

For vertical alignment, look into http://www.sohtanaka.com/web-design/vertical-alignment-css/

Upvotes: 0

itsols
itsols

Reputation: 5582

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.

Upvotes: 4

Nasser Hadjloo
Nasser Hadjloo

Reputation: 12630

you can use all of the following approaches

.One{text-align:center;}

or

.One p{margin: 0 auto;}

Upvotes: 1

Richard
Richard

Reputation: 22036

The margin solution with margin auto is suitable for floating block elements, but if it is only text within normal html you should look at this example here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all

Upvotes: 1

jumperchen
jumperchen

Reputation: 1473

You can use the CSS. margin:auto

Upvotes: 0

Related Questions