社交媒体按钮不在中心

Question

我尝试将社交媒体按钮集中在<div>中，但它仍然保持左对齐。

echo '<div class="socialWrapper">';
echo '<div class="fb-like" data-href=" '  . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></div> ';
echo '<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<div class="g-plusone" data-size="medium"></div>';
echo '</div>';

CSS文件

div.socialWrapper{
    margin:auto;
    width:100%;
    text-align:center;
}

Answer 1

试试div.socialWrapper{display: flex; justify-content: center; flex-direction: row;}

Answer 2

父<div>，socialWrapper，宽度为100％，如果宽度小于100％，则仅使用margin: 0 auto显示居中。

<div>是一个块级元素（它的默认行为是显示为一个块，因此新元素将出现在一个新行上）。请改用<span>，因为它是一个内联元素。

这意味着嵌套的<div>元素需要显式设置为display: inline-block。 （text-align: center将仅适用于默认行为为display: inline的元素，我认为）。

HTML / PHP

echo '<div class="socialWrapper">';
echo '<span class="fb-like" data-href=" '  . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></span> ';
echo '<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<span class="g-plusone" data-size="medium"></span>';
echo '</div>';

CSS

div.socialWrapper{
    margin: 0 auto;
    width: 50%;
    text-align:center;
}

我为您制作了CodePen演示：

See the Pen Social toolbar by Yvonne Aburrow (@vogelbeere) on CodePen.

Answer 3

我设法通过以下代码在css中居社交图标：

.wrapper{
margin: auto;
display: flex;
justify-content: center;
flex-direction: row;
max-width: 200px;

试试这个对我有用。 （我将max-width设置为200px，因为它最适合我，你可以使用不同的数字或者不需要使用att，但在这种情况下，图标会通过div宽度传播。）