尝试对齐我的图标字体</p> </h1>左侧的<h1>和<p>元素

Question

我左边有一个图标字体，我想在我的 lock 图标字体的右侧放置一个<h1>和一个<p>元素。

我想要上面的<h1>和<p>，我也希望<p>位于中心位置。

但我希望<h1>和<p>在中心对齐，但它们始终在左侧对齐。

我已尝试过margin：0 auto;和text-align：center;但没有任何作用。

有人看到我做错了吗？

我正在尝试这样的事情：

我的问题是：

（我尝试将我的font-awesome.css添加到我的小提琴中，但我猜它不起作用）

http://jsfiddle.net/ritz/K3Y5W/1/

我的HTML

<div id="login">
    <div id="align_center">
    <h1>Reserved Area</h1>
    <p>Cookies and Creams</p>
    <span class="lock"><i class="fa fa-lock"></i></span>
   </div>
</div>

我的css：

#login{position:absolute; background:green; top:50%; left:50%; height:320px; width:300px; margin-top:-160px; margin-left:-150px;}
#login p {float:left; color:#000; font-family:'verdana'; font-size:18px; text-align:center;}
#login h1 {float:left; color:#000;font-family:'verdana'; font-size:35px;}
#login span>i{color:#fff; font-size:5em;}
#align_center {margin:0 auto; text-align:center;}

Answer 1

您将元素浮动到左侧：

#login p {float:left; color:#000; font-family:'verdana'; font-size:18px; text-align:center;}
#login h1 {float:left; color:#000;font-family:'verdana'; font-size:35px;}

不要那样做：）

JSFiddle

---

所以这就是我所做的。

1。从登录元素中删除浮动

相反，将相反的float:right;应用于容器元素.align-center。

2。强制容器上的宽度

默认情况下，<div>'s的宽度为100％，因此您必须将其定义为适合允许的宽度，在本例中为396px。

3。设置上边距

要对齐<h1>和<p>，您需要设置一个上边距来推动它们，在这种情况下，我使用了CSS3＆＃39; calc()函数来获取准确的边距使其居中，即（50％ - 65px）/ 2，或者只是（25％ - 32px）。

width: calc(25% - 32px);

Answer 2

浮动元素是＆＃34; srhink-wrapped，＆＃34;这意味着他们可以根据自己的内容调整大小。接下来，你要求它将文本置于元素中心，这实际上什么也没做 - 没有额外的空间可以将它居中。在<h1>和<p>上设置宽度。