css - float 和居中的 Wordpress 页面内容

Question

所以，

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

为此，我使用:

<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

这应该为你做:

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