如何在div中对齐这两个按钮？

Question

我想要的是让两个按钮对齐其父div，其宽度是固定数字或百分比值。我想要的一切都在下图中说明：

快速链接：

http://jsfiddle.net/1wvy5yuy/

代码：

.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>

Answer 1

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

这将集中任何类元素。试试吧

Answer 2

使用margin-left: auto;和margin-right: auto;并摆脱浮动

Answer 3

将text-align: center设置为容器，将display: inline-block设置为子元素应该有效。你还必须删除浮动。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以这样做。使用display:inline-block;和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>

Answer 5

只需添加内部样式表margin-left：53px;

在Facebook上分享