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演示：

在Social toolbar上查看Yvonne Aburrow（@vogelbeere）的笔CodePen。

Answer 3

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <select v-model="selected" @change="sorter" >
     <option disabled value="">Ordina per</option>
     <option value='A-Z'>A-Z</option>
     <option value='Z-A'>Z-A</option>
  </select>
</div>

尝试一下对我有用。（我将max-width设置为200px，因为它最适合我，您可以使用可以使用其他数字，也不需要全部使用att，但在这种情况下，图标会沿div宽度分布。）

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

3 个答案: