Question

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

任何人都可以看到有什么问题吗？谢谢！

我的问题是：

我的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为中心，因为它占据了容器的整个宽度（它是块级元素）。 <span>，而不是它，因为它只占用其内容的宽度（它是内联元素） - 您的彩色背景使其非常明显。实际上，基本上每个子元素（<h1>除外）都是内联或内联块元素，因此将text-align:center直接应用于它们是不可行的。

如果您想将所有中的元素集中在#loop-news中，只需添加此样式即可：

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

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

这里有一个JSFiddle来告诉你这是做什么的。如果这不是你想要的，请告诉我，我会很乐意进一步提供帮助。

在中心发出对齐元素的问题

1 个答案: