Geek Answers Handbook

How to align these two buttons inside a div?

I want the two buttons aligned with their parent div, and its width is a fixed number or percentage value. All I want is said in this image below:

enter image description here

Quick link for this:

http://jsfiddle.net/1wvy5yuy/

the code:

.fastsharetw, .fastsharefb { background: #3B5998; color: #FFF; padding: 15px; border-radius: 10px; font-weight: bold; text-decoration: none; display: block; float: left; width: 60%; } .fastsharetw { background: #00aced; float: left; width: 30px; padding: 10px 7px 6px 8px; } a.fastsharetw, a.fastsharefb { color: #fff } #fast-wrap { border: 1px solid #f00; width: 600px } 
 <div id="fast-wrap"> <a href="http://www.facebook.com/sharer.php?u=http://www.google.com/" target="_blank" class="fastsharefb">Share on Facebook</a> <a href="http://twitter.com/share?text=test page" target="_blank" class="fastsharetw"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"> <path style="fill:#fff" d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path> </svg> </a> <div style="clear:both;"></div> </div>
+4
source share
5 answers
 .class { display: block; margin-left: auto; margin-right: auto; }

This centers any elements of the class. try

+3
source

Use margin-left: auto; and margin-right: auto; and get rid of float

+2
source

Setting text-align: center to the container and display: inline-block to children should work. You must also remove the floats.

 .fastsharetw, .fastsharefb { background: #3B5998; color: #FFF; padding: 15px; border-radius: 10px; font-weight: bold; text-decoration: none; display: inline-block; vertical-align: top; width: 60%; } .fastsharetw { background: #00aced; width: 30px; padding: 10px 7px 6px 8px; } .fastsharefb { text-align: left; } a.fastsharetw, a.fastsharefb { color: #fff } #fast-wrap { border: 1px solid #f00; width: 600px; text-align: center; } 
 <div id="fast-wrap"> <a href="http://www.facebook.com/sharer.php?u=http://www.google.com/" target="_blank" class="fastsharefb">Share on Facebook</a><a href="http://twitter.com/share?text=test page" target="_blank" class="fastsharetw"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"> <path style="fill:#fff" d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path> </svg> </a> <div style="clear:both;"></div> </div>
+1
source

You can take the next path. using display:inline-block; and text-align:center;

 .fastsharetw, .fastsharefb { background: #3B5998; color: #FFF; padding: 15px; border-radius: 10px; font-weight: bold; text-decoration: none; display: block; width: 60%; } .fastsharetw { background: #00aced; width: 30px; padding: 10px 7px 6px 8px; } a.fastsharetw, a.fastsharefb { color: #fff; display: inline-block; text-align: left; vertical-align: middle; } #fast-wrap { border: 1px solid #f00; width: 600px; text-align:center; } 
 <div id="fast-wrap"> <a href="http://www.facebook.com/sharer.php?u=http://www.google.com/" target="_blank" class="fastsharefb">Share on Facebook</a><a href="http://twitter.com/share?text=test page" target="_blank" class="fastsharetw"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"> <path style="fill:#fff" d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path> </svg> </a> <div style="clear:both;"></div> </div>
0
source

just add an internal style sheet field: 53px;

Share on Facebook

-2
source

More articles:


All Articles