This is for a drop down menu of 4 columns.
On the first column with is the "HOME" within a div, I have the text "HOME" in a
tag.
ex. <p style="text-align:center;"> HOME </p>
now if I try an add in <H2> </H2> between HOME, it cancels out the text-align:center and just uses the H2.
What so I need to do in the css to keep both the style="text-align:center and H2 in the same
tag?....if possible anyway, because I like to keep the text-align:center with H2 on the text in the same paragraph
First of all: why do you need a paragraph inside a heading element?
Heading elements are meant to highlight important parts of your site, i.e. headings, and are also indexed by search engines. Read more here: http://www.w3schools.com/html/html_headings.asp. While paragraphs are larger trunks of text, and will add some space before and after the paragraph (since it's a block element) read more here: http://www.w3schools.com/html/html_headings.asp.
To answer your question:
Semantically it is not correct to a paragraph inside a heading or reversed: i.e.
<!-- INCORRECT -->
<h2>
<p>Your heading</p>
</h2>
What you should do is style the heading element directly:
<!-- HTML -->
<h2>Your heading</h2>
/** CSS **/
h2 {
text-align: center;
}
I also realized something similar has been answered before: Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
Just a little side thought: you mention having a drop-down of 4 columns. Wouldn't an <h2> element be too big to have in a drop-down? I immediately was thinking that it would be better having a bold font instead to highlight that specific element. But notice that I do not have any knowledge of your project! :P
you may try this instead of inline css code.. try to use tag
<h2><center>HOME</center></h2>
