HTML文本和图像无法正确对齐

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.

我创建了一个简单的HTML Google Fonts页面,其中包含徽标和一些文本。我告诉文本居中,它不是并且正在使图像低于文本。

    <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

4 个解决方案

#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>

#2

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

默认情况下,

标记会在您的页面上换行。网上有很多地方可以帮助你学习基础教程风格。你可能会发现w3schools对每个标签的简单英文描述很有用。例如,对于段落标记:http://www.w3schools.com/html/html_paragraphs.asp

#3

See this demos

看到这个演示

Demos

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

#4

You need to add

你需要添加

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

#1