浮动和居中的Wordpress页面内容

Question

SO，

我在尝试将一系列浮动元素集中在页面上时遇到了问题。我正在处理一个页面，它在顶部使用了一些浮动元素：页面标题，然后是图像，然后是页面标题中的另一个单词，它们按顺序相互浮动。

要实现这一点，我正在使用：

<div class="bodyheaddiv"><p class="bodyheadtext">Contact Us</p><img class="bodyhead"     src="http://lrgi.org/wp-content/uploads/2012/10/Contact_icon_1.png" alt="" /><p     class="bodyheadtext">Contáctenos</p></div>​

使用CSS：

.bodyheaddiv {
height: 51px;
width: 500px;
margin-left: auto;
margin-right: auto;
}

.bodyhead {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}

.bodyheadtext {
line-height: 30px;
display: inline;
clear: none;
float: left;
margin-top: 0px;
font-size: 18px;
position: relative;
}​

截至目前的结果如下：

页面标题和图片不在其列中居中。 然而，我想要实现的是：

任何有关如何将这些元素集中在页面上的帮助都将非常感谢！

-Marca

Answer 1

这应该适合你：

<强> Demo

<div>
    <p><span>Contact Us</span><span>Contáctenos</span></p>
</div>​

使用CSS：

div {
    height: 70px;
    width: 500px;
    0 auto;
    background-image: url('http://lrgi.org/wp-content/uploads/2012/10/Contact_icon_1.png');
    background-position: top center;
    background-repeat: no-repeat;
}

div p {
    text-align: center;
    height: 70px;
    line-height: 70px;
}

div p span {
    margin: 0 60px;
}

Answer 2

继承人你的回答

<div class="bodyheaddiv">
<table align="center">
<tr>
<td>
<p class="bodyheadtext">Contact Us</p></td>
<td><img class="bodyhead"     src="http://lrgi.org/wp-content/uploads/2012/10/Contact_icon_1.png" alt="" /></td>
<td><p class="bodyheadtext">Contáctenos</p></td>
</tr>
</table>
</div>