HTML Text & Images Not Aligning Properly

Question

I have created a simple HTML Google Fonts page with a logo and some text. I have told the text to centre, it is not and is making the images go below the text.

    <img src="http://www.readingcricketclub.com/wp-content/themes/readingcricketclub/images/logo.png" alt="RCC" align="left" />
<p class="header">Welcome to the Reading CC Registration Form</p>
<img src="http://www.readingcricketclub.com/wp-content/themes/readingcricketclub/images/logo.png" alt="RCC" align="right" />

I am a real beginner, so the answer might be a "kick yourself" one. Thanks

jsFiddle

Answer 1

Just move the second image tag above the <p>

Here is the DEMO for it.

<img src="http://www.readingcricketclub.com/wp-content/themes/readingcricketclub/images/logo.png" alt="RCC" align="left" />

<img src="http://www.readingcricketclub.com/wp-content/themes/readingcricketclub/images/logo.png" alt="RCC" align="right" />
    <p class="header">Welcome to the Reading CC Registration Form</p>

Answer 2

You need to add

.header { 
  font-family: 'Open Sans', sans-serif;
  text-align:center; 
  font-size:30px; 
  display: inline-block;/**add this**/
}

Answer 3

Try putting the images inside the paragraph tags:

<p class="header"><img src="http://www.readingcricketclub.com/wp-content/themes/readingcricketclub/images/logo.png" alt="RCC" align="left" />
Welcome to the Reading CC Registration Form
<img src="http://www.readingcricketclub.com/wp-content/themes/readingcricketclub/images/logo.png" alt="RCC" align="right" /></p>

That will center all three elements, with the images pushed out to the sides of the page.

By default, <p></p> tags will make a new line on your page. There are a lot of places on the web which will help you out with learning the basics tutorial-style. You may find w3schools useful for plain-English descriptions of what each tag does. For example, for the paragraph tag: http://www.w3schools.com/html/html_paragraphs.asp

Answer 4

See this demos

Demos

.header {  display: block;
    float: left;
    font-family: 'Open Sans',sans-serif;
    font-size: 30px;
    text-align: center;
    width: auto; }

Answer 5

try using text-align:inline-block;