How to fix this?

by 6 replies
7
At this website I was trying to position social media icons in middle of side bar .

and i tried with this code

<p style="text-align: center;"> <a href="http://www.hoosewifey.com/wp-content/uploads/2013/02/1360535609_social_rss_box_orange.png"><img class="size-full wp-image-290 alignright" alt="1360535609_social_rss_box_orange" src="http://www.hoosewifey.com/wp-content/uploads/2013/02/1360535609_social_rss_box_orange.png" width="48" height="48" /></a><a href="http://www.hoosewifey.com/wp-content/uploads/2013/02/1360535602_social_twitter_box_blue.png"><img class="size-full wp-image-289 alignright" alt="1360535602_social_twitter_box_blue" src="http://www.hoosewifey.com/wp-content/uploads/2013/02/1360535602_social_twitter_box_blue.png" width="48" height="48" /></a> <a href="http://www.hoosewifey.com/wp-content/uploads/2013/02/1360535592_social_facebook_box_blue.png"><img class="size-full wp-image-288 alignright" alt="1360535592_social_facebook_box_blue" src="http://www.hoosewifey.com/wp-content/uploads/2013/02/1360535592_social_facebook_box_blue.png" width="48" height="48" /></a></p>

icons are close to right instead of centered. I tied alling right, center or left still doesnt work. how do i can position them middle of sidebar please? thanks
#website design #fix
  • You need to get rid of the "alignright" class in each image. If you uploaded these images with the media uploader in wordpress, just choose center alignment and that should change the class to "aligncenter" and fix your issue.
    • [1] reply
    • Hei esquiree,
      instead of use
      Code:
      <p>
      maybe you better use tag
      Code:
      <center>
      and place before you social media code in the widget.
      Hope this useful
      • [1] reply
  • You could try putting your code inside a fixed width div and centering the div. That's assuming they always have the same width which should be the case with social buttons, so once you find it out you'll be able to give your div the right width and from there it should be ok.

    Assuming for example what you're trying to center is 300px wide:
    Code:
    <div style="width: 302px; margin-left: auto; margin-right: auto;">
<!-- whatever you want here -->
</div>
    I always give a couple extra pixels to the div just to make sure the content fits in it.
    If you're not sure of the right width just pick a random value and try it, then adjust until you find the right value.

    Seb.

    PS: AWill is right, the <center> tag has been deprecated for a long time now. Use CSS.
  • yes this could be solve using fixed div like what OldLodgeSkins suggested.. good luck!
  • Thanks everybody. I fixed it. looks better now
Join the discussion

Next Topics on Trending Feed