Question

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

按钮是

a）Facebook分享按钮

b）Twitter关注

c）Twiiter分享

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正确放置在按钮下方？ enter image description here

Answer 1

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

但是，使用CSS margin属性比使用换行符更好。换行符属于文本。

供参考 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%;
}
*/

Answer 2

只需从您的CSS中删除width: 50%;即可解决您的问题。您将会喜欢这个

#inner 
{
    margin: 0 auto;
}

希望它有效。

将div元素移动到外部div的中心

2 个答案: