CODEWITHSUNDEEP
htmlcssimagetextalignment
Arjun Naha
Arjun Naha

Reputation: 120

HTML Text & Images Not Aligning Properly

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

Upvotes: 3

Views: 2816

Answers (5)

Aadya Sriram
Aadya Sriram

Reputation: 1

try using text-align:inline-block;

Upvotes: -1

Tushar
Tushar

Reputation: 4418

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>

Upvotes: 1

AndrewWhite
AndrewWhite

Reputation: 310

You need to add

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

Upvotes: 0

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2542

See this demos

Demos

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

Upvotes: 0

morric
morric

Reputation: 1243

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

Upvotes: 0

Related Questions