HTML/CSS - 我应该设置什么规则来获得正确的对齐？答案

【问题标题】：HTML/CSS - What rules should I set to get this proper alignment?HTML/CSS - 我应该设置什么规则来获得正确的对齐？
【发布时间】：2013-07-21 22:32:30
【问题描述】：

这是说明我的目标的图像：

http://imgur.com/80v5bRk

实现这种风格的最佳方法是什么？通过这个，我问，我怎样才能设置规则，以便按钮的间距和位置在中心完全对齐（它们现在没有正确对齐）。我在想一个将整个东西包裹在一起的 div，一个向左浮动的 div 持有第一个角度和标题，以及一个向左浮动的持有图标的第二个 div。这些图标来自 font-awesome 包，我不明白如何正确对齐它们。

【问题讨论】：

标签： css html icons font-awesome

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

我希望这会有所帮助。

【讨论】：

我确定他们希望按钮可点击。（因此是“按钮”）因此，他们仍然必须通过恶作剧来正确对齐一些 A 标签（或他们决定采用的任何方法）。因此，将它用作 img 可能会更容易。不是背景。不过只是我个人的看法。每个人的口味都不一样
如果要使用 img 标签，代码中的唯一区别是在 .button 中添加 display: block;，将 height 更改为 50px，margin 更改为 @987654328 @，加个border: none应该没问题。
为什么要明确添加display:block。使用浮点数将毫无意义/违反直觉。此外，它会抛出更多的对齐。一个街区是为了占据整个分配的房间。所以虽然，是的，你可以添加一个display:block，你需要做额外的工作才能正确定位
img 标签的默认显示是inline-block，这将很难使用其他属性，但是你有一点，当你声明一个float 它会自动转变成block。不知道你为什么这么粗鲁。
不要试图粗鲁。试图告知。 imgs 可以在他们自己的 div 中。那个 div 有一个固定的宽度。然后，imgs 可以根据需要占用尽可能多的空间。不过inline和block还是有区别的。

【解决方案2】：

嗯，除非您发布您当前拥有的内容，否则很难准确回答。
但是，您的方向是正确的。

我会做什么：

将整个内容包装在一个 div 中（如您所说）
将文本向左浮动（您也说过）
浮动图标向右（不是向左）

就间距而言，在两个按钮的左/右放置一个边距/填充。

编辑：
根据我与 Luiz Berti 的讨论：

你几乎是对的。
试试这个： http://jsfiddle.net/GYPK5/1/

HTML

<div class="bar">
    <div class="text">Lots of stuff here</div>
    <div class="buttons">
        <img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
        <img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS

.bar {
    width: 400px;
    border: 1px solid black;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
}
.text {
    margin-left: 20px;
    float: left;
    width: 200px;
}
.buttons {
    float: right;
    margin-right: 20px;
    position: relative;
    top: 2px;
}
.buttons img {
    margin: 0 10px;
}
.clear {
    clear: both;
    width: 0;
    height: 0;
}

【讨论】：