浮动和居中的 Wordpress 页面内容答案

【问题标题】：Floated and Centered Wordpress Page Content浮动和居中的 Wordpress 页面内容
【发布时间】：2012-10-12 06:57:01
【问题描述】：

所以，

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

为此，我正在使用：

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

目前的结果是这样的：

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

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

-马卡

【问题讨论】：

HTML 是一团糟...... bodyheaddiv 也是一个容器和一个页眉......你应该有一个容器，然后在一个页眉，三列，一个页脚等......然后你可以设置 text-align: center;我建议你用你的代码发布一个 JSFiddle。

标签： css wordpress css-float center margin

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

这不是表格数据，因此不应使用<table>
只是提供了一个替代方案