Html 在中心对齐元素

我试图将我的元素排列在中间，但在这个过程中我遇到了一些问题。我把“标题”放在中间，它起作用了，现在我对其他元素也做了同样的处理，但它不起作用

那里的任何人都能看出哪里出了问题？谢谢大家!

我的JSF解决问题：

#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; }

我的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>

的文本可以使用

text align:center

居中，因为它占据了容器的整个宽度（它是块级元素）。

，与其说它只占内容的宽度（它是一个内联元素）——您的彩色背景使其非常可见。事实上，基本上，那里的每个子元素（除了

）都是内联或内联块元素，因此直接将

text align:center

应用于它们是行不通的

如果要将

#循环新闻

中的所有元素置于中心位置，只需添加此样式即可：

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

这将导致

#循环新闻

的所有内联内容居中。请注意，这也会使

上的

文本对齐：居中变得不必要

这里有一个例子来告诉你这是怎么回事。如果这不是您想要的，请告诉我，我很乐意进一步提供帮助。
您具体想集中哪些元素？只有
？我想将所有元素对齐到中心。我已经做了标题，但与其他元素它不工作，我不明白为什么。