社交媒体按钮不在 <div> 中答案

【问题标题】：Social Media Buttons Not Center in <div>社交媒体按钮不在 <div> 中
【发布时间】：2019-04-19 19:50:54
【问题描述】：

我尝试将社交媒体按钮置于<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;
}

【问题讨论】：

不应该是margin: 0 auto;吗？也许您可以添加一个具有 display: flex 和 align-items: middle; 的容器 div
这对我来说居中对齐，也不需要边距。如果没有定义的宽度，该边距甚至不会做任何事情。
@EthanBristow 不必是 0 auto。 0 in 0 auto 适用于顶部底部边距。当您向margin 提供单个值时，该值将应用于顶部、底部、右侧和左侧边距。使用自动边距居中的关键是需要将左右边距设置为auto，同时定义宽度margin: auto; satisfies that。
代码没问题（尽管有多余的边距声明）你的代码中有其他东西将它推向左。发个链接？
hahaha width:100% with margin auto 不会做任何事情 - 它是 100% 宽度，所以你怎么能居中呢？如果你想让它的所有内容居中，让它们成为 inline-block 元素，然后你的 text-align 将适用于它们

标签： css alignment center social

【解决方案1】：

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

【讨论】：

【解决方案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 演示：

请参阅 CodePen 上 Yvonne Aburrow (@vogelbeere) 的 Pen Social toolbar。

【讨论】：

对此我不确定。当我删除 google plus 按钮时，它会居中对齐，但是当我添加回 google plus 时，它会向左对齐。我认为 google plus 按钮在后面有额外的空间。
在这种情况下，请检查应用于 Google Plus 按钮的 CSS。我的 CodePen 工作，所以我只能假设有一些额外的 CSS 应用于该按钮（并确保它在 <span> 而不是 <div>

【解决方案3】：

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

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

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

【讨论】：