css - Move a div element at the center of the outer div -
i have 3 buttons , div element . want of them placed 1 below other . able center buttons unable center div .
the buttons
a ) facebook sharing button
b ) twitter follow
c) twiiter share
d ) google+1 share
after haveing done hardwork of implementing these buttons seems strange yes stuck @ simple display :(
can me allign logically 1 below .
code :
<div id ="outer" class="text-center"> <img id = "share_button" src = "images/share_button.png" > <br/> <br/> <a href="https://twitter.com/ixxxxg" class="twitter-follow-button" data-show-count="false">follow @ixxxg</a> <br/> <br/> <a href="https://twitter.com/intent/tweet?text=&url=https://twitter.com/ixxxxxg" class="twitter-share-button" data-lang="en">tweet</a> <br/> <br/> <div id="inner" class="g-plusone" data-annotation="inline" data-width="300"></div> <br/> <br/> <a href="thanks.php"> <button class="btn btn-danger " type="button">skip </button> </a> </div>
i tried following css not work :
#inner { width: 50%; margin: 0 auto; }
any work around div placed correctly below buttons ?
this looks wanted? => http://jsbin.com/ajoqan/3/edit
however, better use css margin property use line breaks. line breaks belong in text.
for reference html:
<!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset=utf-8 /> <title>js bin</title> </head> <body> <div id ="outer" class="text-center"> <img id = "share_button" src = "images/share_button.png" > <a href="https://twitter.com/ixxxxg" class="twitter-follow-button" data-show-count="false">follow @ixxxg</a> <a href="https://twitter.com/intent/tweet?text=&url=https://twitter.com/ixxxxxg" class="twitter-share-button" data-lang="en">tweet</a> <div id="inner" class="g-plusone" style="border:1px solid red;" data-annotation="inline" data-width="300">google+</div> <a href="thanks.php"> <button class="btn btn-danger " type="button">skip </button> </a> </div> </body> </html>
the css:
#outer { width: 100%; margin: 0 auto; } #outer > * { /* elements in div #outer */ margin: 10px 25%; width: 50%; } /* alternatively can #outer > * { position: relative; top: 10px; left: 25%; } */
Comments
Post a Comment