CODEWITHSUNDEEP
htmlcss
OzzC
OzzC

Reputation: 821

Issue aligning elements at center

Im trying to align my elements at center but I´m having some problems in this process. I aligned the "Title" at center and it works, and now I´m doing the same process to other elements but its not working.

Anyone there can see what is wrong? Thank you!

My jsfiddle with the problem:

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

My 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>

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

Upvotes: 0

Views: 29

Answers (1)

Serlite
Serlite

Reputation: 12258

The text of the <h1> can be centered with text-align:center because it takes the whole width of its container (it's a block-level element). The <span>, not so much, as it only takes the width of its content (it's an inline element) - your coloured background make this quite visible. In fact, basically every child element you have there (other than the <h1>) is an inline or inline-block element, so applying text-align:center to them directly won't work.

If you wanted to center all the elements in #loop-news, just adding this style would do it:

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

This causes all inline content of #loop-news to be centered. Note that this also renders text-align:center on the <h1> unnecessary.

Here's a JSFiddle to show you what this does. If this isn't what you wanted though, let me know and I'll be happy to help further.

Upvotes: 1

Related Questions