Как разместить виджет twitter

Question

простой вопрос сегодня. Как я могу поместить виджет Twitter? Я хочу, чтобы он центрировался по горизонтали и вертикали внутри div. Вот код:

<div class="twitterborder"> 

<a class="twitter-timeline tw-align-center" href="https://twitter.com/twitterapi" data-widget-id="591646755353186304" width="150px">Tweets by @twitterapi</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

</div> 

.twitterborder { 
width:27.5%; 
height:300px; 
margin-top:3px; 
margin-right:5%; 
float:right; 
background:#707070; 
} 

Использование CSS кода щебетать поставки, кажется, не делают разницы, а когда значения изменения ничего фактически не меняется. Я попытался внедрить стиль «» в тег A и попытался добавить класс.

В настоящее время выглядит следующим образом (извинениями, если изображение не работает, своего рода новый здесь):
Image should be here http://gyazo.com/b96dcc6f03ef8b42dc654ad9fd832a50

Спасибо!

Answer 1

Посмотрите на это решение: link

CSS:

.table{ 
    display:table; 
    height: 100%; 
    width: 100%; 
} 
.table-cell{ 
    display:table-cell; 
    vertical-align: middle; 
} 

HTML:

<div class="twitterborder"> 
    <div class="table"> 
     <div class="table-cell"> 
<a class="twitter-timeline tw-align-center" href="https://twitter.com/twitterapi" data-widget-id="591646755353186304" width="150px">Tweets by @twitterapi</a> 

    <script> 
     ! function(d, s, id) { 
      var js, fjs = d.getElementsByTagName(s)[0], 
       p = /^http:/.test(d.location) ? 'http' : 'https'; 
      if (!d.getElementById(id)) { 
       js = d.createElement(s); 
       js.id = id; 
       js.src = p + "://platform.twitter.com/widgets.js"; 
       fjs.parentNode.insertBefore(js, fjs); 
      } 
     }(document, "script", "twitter-wjs"); 
    </script> 
     </div> 
    </div> 
</div> 

Answer 2

Для центрирования виджет добавить

text-align: center; 

к вашему CSS.

Demo here.

---

или с использованием flexboxes для вертикальной и горизонтальной центровки:

display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 

Demo here.

Answer 3

Ни одно из решений в этом посте не будет центрировать мой виджет (может быть, у меня есть заказ CSS вопрос ... или моя пользовательская конфигурация контейнера ... кто знает !?)

Однако это решение CSS сделал работу:

.twitter-timeline-rendered { 
    margin: auto; 
} 

.twitter-timeline-rendered класс устанавливается на iframe элемент JS кода вставки в Twitter на вашей странице.

Вот мой HTML источника:

<div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12 text-center"> 
     <!--Twitter client start--> 
     <a class="twitter-timeline" data-dnt="true" data-chrome="noborders noscrollbar nofooter" href="https://twitter.com/yourTwitterAccount" data-widget-id="yourTwitterWidgetID">Tweets by @yourTwitterAccount</a> 
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
     <!--Twitter client end--> 
    </div> <!-- /.col --> 
</div> <!-- /.row -->` 

text-center класса по col DIV обеспечивает текст виджета центрированный, если сам виджет не загружается/рендеринга. Также обратите внимание, что я не использую класс wrapper.

Вот мой HTML после загрузки/рендеринга в Chrome:

<div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12 text-center"> 
     <!--Twitter client start--> 
     <iframe id="twitter-widget-iyourTwitterWidget" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="true" style="position: static; visibility: visible; width: 520px; height: 370px; padding: 0px; border: none; display: block; min-width: 180px; max-width: 100%; min-height: 200px; margin-top: 0px; margin-bottom: 0px;" data-widget-id="yourTwitterWidgetID" data-user-id="yourTwitterUserID" title="Twitter Timeline"></iframe> 
     <!--Twitter client end--> 
    </div> <!-- /.col --> 
</div> <!-- /.row -->` 

Обратите внимание на класс twitter-timeline-rendered, который берет на нашем margin: auto; из приведенного выше CSS.