css - 浮动和居中的 Wordpress 页面内容

Question

所以，

我在尝试将一系列浮动元素放在页面上时遇到问题。我正在处理一个在顶部使用一些浮动元素的页面：页面标题，然后是图像，然后是页面标题中的另一个单词，所有这些都按该顺序彼此相邻浮动。

为此，我正在使用：

<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;
}​

目前的结果是这样的：

页面标题和图像不在其列中居中的位置。但是，我想要实现的是：

任何帮助弄清楚如何在页面上居中这些元素将不胜感激！

-马卡

Answer 1

这应该为你做：

演示

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