html - 在中心发布对齐元素

Question

我试图将我的元素居中对齐，但我在这个过程中遇到了一些问题。我将“标题”居中对齐并且它有效，现在我对其他元素执行相同的过程但它不起作用。

有谁能看出哪里出了问题吗？谢谢!

我的 jsfiddle 问题:

http://jsfiddle.net/mibb/6SLa5/

我的 HTML:

<section id="loop-news-container">
    <article id="loop-news">
         <a href="#"></a>
         <h1><a href="#">Title</a></h1>
         <span>Date of Post</span> 
         <img src="image1.jpg" /> 
         <p>Post of 1 <a class="buttonl" href="#show" id="verfancy">read more</a></p></p>
    </article>

我的CSS:

#loop-news-container{width:100%; height:auto; float:left;}
#loop-news{width:280px; height:250px; background:#fff; margin:5px auto 5px auto;}
#loop-news h1 {font-family:'bariol_boldbold';   text-align:center; font-family:'bariol_boldbold';margin:0 auto 0 auto; background:#F00;position:relative; text-decoration:none;}
#loop-news h1 a{text-decoration:none; font-size:20px; color:#002e5e; font-weight:100; }
#loop-news span{font-family:'bariolthin';font-size:14px; font-weight:normal;color:#888;margin:0 auto 0 auto; text-align:center; background-color:#FF0; }

Answer 1

<h1>的正文可以以 text-align:center 为中心因为它占据了容器的整个宽度(它是 block 级元素)。 <span> , 不是那么多，因为它只占用其内容的宽度(它是一个内联元素) - 你的彩色背景使它非常明显。事实上，基本上你在那里的每个子元素(除了 <h1> )都是内联或内联 block 元素，所以应用 text-align:center直接给他们是行不通的。

如果你想将 #loop-news 中的所有元素居中，只需添加此样式即可:

#loop-news {
    text-align:center;
}

这会导致 #loop-news 的所有内联内容居中。请注意，这也会呈现 text-align:center在 <h1> 上不必要。

这是一个 JSFiddle向您展示这是做什么的。如果这不是您想要的，请告诉我，我们很乐意进一步提供帮助。