HTML 文本和图像未正确对齐答案

【问题标题】：HTML Text & Images Not Aligning ProperlyHTML 文本和图像未正确对齐
【发布时间】：2014-07-18 17:58:06
【问题描述】：

我创建了一个带有徽标和一些文本的简单 HTML Google 字体页面。我已经告诉文本居中，它不是并且正在使图像低于文本。

    <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" />

我是一个真正的初学者，所以答案可能是“踢自己”。谢谢

jsFiddle

【问题讨论】：

所以？你想达到什么效果？
你应该去学习基本的HTML和CSS。是的，答案是“踢自己一个”，因为它是基本的HTML。如果您还没有开始尝试学习语言，请不要只是来这里问这样的问题。
尝试搜索 SO。有很多类似的问题有答案，肯定会对你有所帮助。

标签： html css image text alignment

【解决方案1】：

只需将第二个图片标签移到<p>上方

这是DEMO。

<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】：

你需要添加

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

【讨论】：

【解决方案3】：

看这个演示

Demos

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

【讨论】：

【解决方案4】：

尝试将图片放在段落标签内：

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

这将使所有三个元素居中，图像被推到页面的两侧。

默认情况下，<p></p> 标签会在您的页面上创建一个新行。网络上有很多地方可以帮助您学习基础教程风格。您可能会发现 w3schools 对于每个标签的作用的简单英语描述很有用。例如，对于段落标签：http://www.w3schools.com/html/html_paragraphs.asp

【讨论】：