Question

以下是我的尝试：

(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

.fb-comments{
        display:block;    	
        margin:25px auto;
    	background:gold;
    }

    <div id="fb-root"></div>
    <div class="fb-comments" data-href="http://dubina.net16.net/comments.php" data-numposts="100"></div>

div不居中，但与左侧对齐！
我想把它放在页面的中心。

Answer 1

尝试在CSS类中设置min-width和min-height / width: auto;属性。

Answer 2

.fb-comments{
    display:block;      
    margin:auto;
    background:gold;
}

另一种方式是直接将其设为 HTML 文档的子项，而不是<div>或其他内容。然后添加css left:50%;或right:50%;，它们之间存在差异，但它有效。然后添加position:absolute;以使其相对于祖先位置，即您案例中的 HTML 文档。

编辑： 我可以告诉你它为什么不起作用。首先，如果您尝试left:50%;，则您的评论框左边缘将从屏幕中间开始，导致它从50％向右渲染，因此，开头只是50％，而不是整个{ {1}}

而且：要解决此问题，您可以使用This但它将使用jQuery，而不仅仅是HTML / CSS。

OR：使用此

<div>

请务必更改.fb-comments { position: block; width:545px; left: 50%; margin-right: -50%; top:150px; transform: translate(-50%, -50%) }以满足您的需求。

编辑：我不是JavaScript程序员，但我了解基础知识，我告诉他们该怎么做。没有CSS（因为我上面的回答与我合作）问题是，以div为中心总是将第一个像素列放在中心，你的div实际上是居中的，但是与他的左像素相关，没有中间。您的解决方案将在Javascript＆amp;一个照片编辑应用程序，它不是一个实用的解决方案，但它的工作原理。

获取图片或div的宽度并在某处输入。（使用照片编辑应用程序）
现在，像你一样居中。
它的中心位置与其左侧像素不是中心
在JavaScript中，从右/左边距添加图片宽度/ 2取决于靠近边缘的距离。这不是一个实用的解决方案。在大多数情况下，它不起作用，因为你将为每个分辨率做一个媒体规则，使其完美。

Answer 3

您可以使用flexbox，并将其包装到容器div中。如果将“container div”的显示和属性设置为：

.fb-comments-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

这里面的div将集中在一起。您可以将.fb-comments更新为：

.fb-comments {
  display: flex;
  margin: 25px 0;
  background: gold;
}

Answer 4

你的班.fb-comments似乎被另一个正在加载“.fb_iframe_widget_loader”的fb类所取代。所以你需要在你的类中添加另一个选择器，如下所示。如果你想让元素占据整个屏幕，请使用display：block;，但如果你想让它居中，那么使用display：inline-block;并添加text-align：center;到父容器。在这种情况下，它是身体。

(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    body {
        text-align: center;
    }
    body .fb-comments{
        display: inline-block;    	
        margin:25px auto;
    	background: gold;
    }

    <div id="fb-root"></div>
    <div class="fb-comments" data-href="http://dubina.net16.net/comments.php" data-numposts="100"></div>

Answer 5

将position: relative添加到fb-comments的父元素（即容器）的CSS中 - 只有margin: 25px auto;设置才能使div居中。< / p>

Answer 6

你最好给出完整的代码。以第二个div作为例子，如果它的parentNode是body，你需要设置宽度和高度，如果它的parentNode不是body，你可以这样做：

.fb-comments{
        width:800px;
        height:800px;
        display:block;      
        margin:25px auto;
        background:gold;
        **position:absolute;**
    }
$(function()
    {
        var $lol = $("#lol");
        $lol.css("left",(window.innerWidth-$lol[0].offsetWidth)/2);
        $lol.css("top",(window.innerHeight-$lol[0].offsetHeight)/2);
    })
  <div id="lol" class="fb-comments" data-href="http://dubina.net16.net/comments.php" data-numposts="100"></div>

如何集中广泛的div

6 个答案: