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=&amp;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 ? enter image description here

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=&amp;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

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -