Как отцентрировать широкий DIV

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;  \t 
 
     margin:25px auto; 
 
    \t background:gold; 
 
    }

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

ДИВ не по центру, но выравнивается по левой стороне!
Я хочу положить его в центр страницы.

Answer 1

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

Другой способ заключается в сделать его дочерним HTML документ непосредственно, не будучи в <div> или что-то. Затем добавьте css left:50%; или right:50%;, есть разница между ними, но он работает. Затем добавьте position:absolute;, чтобы сделать его положение относительно предка, то есть документ HTML в вашем случае.

---

EDIT: Я могу сказать вам, почему это не работает. Во-первых, если вы пробовали left:50%;, левый край вашего поля комментариев начнется посередине экрана, что приведет к его отображению с 50% вправо. Итак, начало только составляет 50%, а не все <div>

И:, чтобы исправить это, вы можете использовать This, но он будет использовать только jQuery, а не HTML/CSS.

ИЛИ: использование этого

.fb-comments { 
    position: block; 
    width:545px; 
    left: 50%; 
    margin-right: -50%; 
    top:150px; 
    transform: translate(-50%, -50%) 
} 

Обязательно измените top:150px; в соответствии с вашими потребностями.

---

EDIT: Я не программист JavaScript, но я понимаю, основы, я расскажу, как, как это сделать. без css (так как мой ответ выше работал со мной) Проблема в том, что центрирование div всегда помещает первый столбец пикселей в центр, вы div действительно центрированы, но связаны с его левыми пикселями, а не с серединой. Ваше решение будет в Javascript & приложение для редактирования фотографий, это не практическое решение, но оно работает.

• Получите ширину своего изображения или div и введите его где-нибудь. (с приложением для редактирования фотографий)
• Теперь, Центрируйте, как и вы.
• Он будет центрирован относительно левых пикселей не в центре
• в JavaScript, добавьте изображение ширины/2 справа/слева поля зависит от того, что ближе к краю. Это не практическое решение & в большинстве случаев, это не сработает, потому что вы будете делать медиа-правило для каждого разрешения, чтобы сделать его идеальным.

Answer 2

установки min-width и min-height/width: auto; свойства в классе CSS Try.

Answer 3

вы можете использовать flexbox и обернуть его в контейнер div. если вы установили отображение и свойства этого «контейнера div» следующим образом:

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

div внутри этого объекта будет центрироваться. И вы можете обновить .fb-комментарии, как:

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

Answer 4

Ваш класс .fb-комментарии, кажется, обгоняет другое фб класса, который ЗАГРУЖАЕТСЯ «.fb_iframe_widget_loader». Поэтому вам нужно добавить еще один селектор в свой класс, как показано ниже. Если вы хотите, чтобы элемент занимал весь экран, используйте 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;  \t 
 
     margin:25px auto; 
 
    \t 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 к CSS из родительского элемента (т.е. контейнера) из fb-comments - только тогда установка margin: 25px auto; может центрировать DIV.

Answer 6

Лучше дать полный code.Take второго DIV в качестве примера, если это ParentNode этого тела, вам необходимо установить ширину и высоту, если это ParentNode не тело, вы можете сделать так:

.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>