Question

我创建了一个简单的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" />

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

jsFiddle

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

Answer 2

您需要添加

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

Answer 3

尝试将图像放在段落标记内：

<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

Answer 4

查看此演示

Demos

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

HTML Text＆amp;图像无法正确对齐

4 个答案: