css - 使用 CSS 水平对齐

标签 css alignment css-float

这是我在 StackOverflow 上的第一篇文章,我对此感到非常兴奋,因为 Google 经常将我带到这里来寻找全面的答案。

无论如何,我的问题很简单,但我似乎无法弄明白。我试图将三个小图标对齐在同一行上,但在我的页面/帖子标题的右侧。帖子标题代码如下所示:

<div class="post-heading">
  <h1>Title</h1>
</div>

这 3 个图标需要有自己的 ID 才能正常工作。它们是这样插入的:

`#icon_container {
position: relative;
margin: 0;
padding: 0;
line-height: normal;
font-size: medium;
width: 50px;}

`#icon_container #icon_1 {
    float: right;
    background-image: url(icon.png);
    background-repeat: no-repeat;}`


`#icon_container #icon_1 A {
    width: 24px;
    height: 24px;
    display: block;}`

所以我在这里想要实现的就是让 h1 标题在左边,在同一个 alignmnet 右边,用上面的 CSS 插入 3 个图标。谁能帮我吗?我将不胜感激 :)

谢谢大家

编辑

我忘了提及图标的 HTML 代码;这是:

<div id="icon_container"><div id="icon_1"><a href="#" id="icon_1_button"></a></div><div id="icon_2....</div><div style="clear:both"></div></div>

最佳答案

h1和图片需要有

style="display:inline"

如果您希望图像具有相同的水平对齐方式。

关于css - 使用 CSS 水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8187107/

相关文章:

css - 基于 props 长度的 React 样式宽度

jquery - 如何将此 jquery 菜单移动到我想要的位置?

r - 如何水平对齐图(ggplot2)?

html - float div不重叠

css - 用CSS定位div框

html - 为什么 block 元素表现得像行内元素?

javascript - 如何在下拉列表中添加一个div

html - MaterializeCSS 中的面板或组框?

css - float :right property on <p> which is inside a <div> is not working

html - 在 <td></td> 中间对齐图像