-1

我有 3 个按钮和一个 div 元素。我希望所有这些都放在另一个之下。我能够使按钮居中，但无法使 div 居中。

按钮是

a ) Facebook 分享按钮

b) 推特关注

c) 推特分享

d) Google+1 分享

在完成了实现这些按钮的所有艰苦工作之后，这似乎很奇怪，但是是的，我被困在简单的显示中:(

有人可以帮我在逻辑上把一个放在另一个下面。

代码 ：

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

我尝试了以下 CSS 但不起作用：

#inner {
    width: 50%;
    margin: 0 auto;
}

有什么办法可以让 div 正确放置在按钮下方？ 在此处输入图像描述

4

2 回答 2

1

这看起来像你想要的？=> http://jsbin.com/ajoqan/3/edit

但是，最好使用 CSS 边距属性而不是使用换行符。换行符属于文本。

供参考 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>

CSS：

#outer {
    width: 100%;
    margin: 0 auto;
}
#outer > * { /* all elements in div #outer  */
  margin: 10px 25%;
  width: 50%;
}
/* alternatively you can do

#outer > * {
  position: relative;
  top: 10px;
  left: 25%;
}
*/
于 2013-05-09T11:51:13.133 回答
0

只需width: 50%;从您的 CSS 中删除，您的问题就会得到解决。您的 CSS 会喜欢这样

#inner 
{
    margin: 0 auto;
}

希望它有效。

于 2013-05-09T11:38:26.243 回答