css - HTML/CSS - 我应该设置什么规则才能正确对齐？

Question

这是一张说明我的目标的图片:

http://imgur.com/80v5bRk

实现这样的样式的最佳方法是什么？通过这个，我问，我如何设置规则，以便按钮的间距和位置在中心完全对齐(它们现在没有正确对齐)。我在想一个将整个东西包装在一起的 div，一个向左浮动的 div 包含第一个 Angular 和标题，另一个向左浮动的 div 包含图标。这些图标来自 font-awesome 包，我不明白如何正确对齐它们。

Answer 1

应该做一些类似的事情:

HTML:

<div class="bar">
    <div class="first button"></div>
    <dic class="second button"></div>
</div>

CSS:

.bar{
    width: 960px;
    height: 60px;
    margin: 0 auto 0 auto;
    padding: 5px;
}

.button {
    width: 50px;
    height: 100%;
    float: right;
    margin-right: 10px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: center; /* This is what will centralize it vertically and horizontally */
}

.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }

希望对您有所帮助。