CODEWITHSUNDEEP
htmlcss
AGamePlayer
AGamePlayer

Reputation: 7736

How do I align this two buttons inside a div?

What I want is to make the two buttons align to their parent div, which its width is a fixed number or percentage value. Everything I want is said in this image below:

enter image description here

Quick Link for this:

http://jsfiddle.net/1wvy5yuy/

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>

Upvotes: 4

Views: 1984

Answers (5)

Abdullah Al Noman
Abdullah Al Noman

Reputation: 2878

.class {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This will center any class elements . try it

Upvotes: 3

ketan
ketan

Reputation: 19341

You can do like following way. 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>

Upvotes: 0

Neelakandan
Neelakandan

Reputation: 21

just add the inside style sheet margin-left:53px;

Share on Facebook

Upvotes: -2

lnewt
lnewt

Reputation: 31

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

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

Setting text-align: center to container and display: inline-block to child elements should work. You also have to remove 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>

Upvotes: 1

Related Questions