Jump to content

How to center div


newcoder1010

Recommended Posts

Hello,

HTML:

<section id="block-widgets-s-socialmedia-profile-default" class="smp">
  <div id="widgets-element-socialmedia_profile-default" class="widgets">
    <div id="widgets-element-socialmedia_socialmedia-twitter-profile-button" class="widgets widgets-element">
      <a href="http://twitter.com/xx" title="Visit xx on Twitter" target="_blank">
        <img src="/rincon/sites/all/modules/socialmedia/icons/levelten/glossy/48x48/twitter.png" alt="Twitter icon"></a></div>
    
    <div id="widgets-element-socialmedia_socialmedia-facebook-profile-button" class="widgets widgets-element">
      <a href="http://www.facebook.com/yy" title="Visit yy on Facebook" target="_blank">
        <img src="/rincon/sites/all/modules/socialmedia/icons/levelten/glossy/48x48/facebook.png" alt="Facebook icon"></a>
    </div>
    
    <div id="widgets-element-socialmedia_socialmedia-rss-feed-button" class="widgets widgets-element">
      <a href="/rincon/rss.xml" title="Subscribe to  via RSS" target="_blank">
        <img src="/rincon/sites/all/modules/socialmedia/icons/levelten/glossy/48x48/rss.png" alt="RSS icon"></a>
    </div>
    
    <div class="widgets-clear"></div></div>
</section>

CSS:

.smp {text-align:center;}

.widgets{text-align:center;}

.widgets-element{display:inline-block;}

I tried to place the above images center of the block. It did not work. Images are floated left by default. I would like to place them in the center. Please advise.

 

Thanks.

 

Link to comment
Share on other sites

You can centre floated, but! its a lot of coding when you can simply use float: none;. IF the parent container is floated without a width greater than the image it will centre itself to parent element and NOT! to width of page.

If image is using display: inline-block; use text-align: center; ON parent element. If image is using display: block; and a set fixed width then use margin: 0 auto; on image

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...