问题对齐在中心的元素

我试图对齐我的元素在中心，但我在这个过程中有一些问题。我将“标题”排列在中心位置并且工作正常，现在我正在对其他元素执行相同的过程，但它不起作用。问题对齐在中心的元素

任何人都可以看到什么是错的？谢谢！

我的jsfiddle的问题：

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

来源

2014-03-27 OzzC

你想要居中哪个元素？只是''？ – Serlite

我想将所有元素对齐到中心。我已经做了标题，但其他元素不起作用，我不明白为什么。 – OzzC

<h1>的文本可以以text-align:center为中心，因为它占用了其容器的整个宽度（它是块级元素）。 <span>并非如此，因为它仅占用其内容的宽度（它是内联元素） - 您的彩色背景使其非常明显。实际上，基本上每个子元素（<h1>除外）都是内联或内嵌块元素，因此直接应用text-align:center不会起作用。

如果你想中心所有的元素#loop-news，只是添加这种风格会做到这一点：

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

这导致的#loop-news所有内嵌内容为中心。请注意，这也使text-align:center<h1>不必要。

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

来源

2014-03-27 00:19:16 Serlite

问题对齐在中心的元素

回答

相关问题