与CSS水平对齐

这是我在StackOverflow上的第一篇文章，对此我感到非常兴奋，因为Google经常带我到这里寻找全面的答案。与CSS水平对齐

无论如何，我的问题很简单，但我似乎无法弄清楚。我正在尝试将同一行中的三个小图标对齐，但位于我的页面/帖子标题右侧。帖子标题代码如下所示：

<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到右侧的3个图标插入上述CSS。谁能帮我吗？我明白了很多:)

感谢所有

编辑

我忘了提为图标的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>

来源

2011-11-18 Kaneda

你可以取悦图标你'html'代码.... –

需要上浮后的标题和图标元素左移。

<div class="post-heading" > <h1>Title </h1> < /div> 
<div id='icon_container'> 
    <div id='icon_1'></div> 
    <div id='icon_2'></div> 
</div> 

#icon_container, #icon_1, #icon_2, .post_heading {float:left;}

来源

2011-11-18 18:24:14

喜，我试过他和它的工作！不过现在我的内容文字很奇怪地定位了.. – Kaneda

在css中，把'#content_id {clear：left;}' –

完美的作品！让我看看是否遇到更多问题。但直到现在，谢谢你的支持:) – Kaneda

尝试浮动你#post-heading h1向左：

#post-heading h1 { 
    float: left; 
}

来源

2011-11-18 18:23:24 Blender

的H1和图像需要有

style="display:inline"

，如果你需要的图片具有相同的水平对齐方式。

来源

2011-11-18 18:26:48 Danny

我相信这只会是'＃icon'元素与'h1'相同的div –

你有两种选择。

拳之一是

<div class="post-heading"> 
    <h1>Title</h1> 
<span class="icon_container"> [icon] </span> 
</div> 
.post-heading *{ 
    display:inline; 
}

Example

第二是

.post_heading h1{float:left;}

Example

来源

2011-11-18 18:29:20 maxisam

与CSS水平对齐

回答

相关问题