CODEWITHSUNDEEP
htmlcsstwitter
Hello Universe
Hello Universe

Reputation: 3302

How do I make twitter embed center on page?

I am trying to embed twitter video and twit in such a way so that these are centered on the page and also takes full container width (my-container)

Below is the html I have

<div class="my-container">

 <blockquote class="twitter-tweet" data-lang="en">
  <p lang="und" dir="ltr">Fan. <a href="asdasd">asdasdasdas</a></p>&mdash; #DateChallenge (@Oloni) <a href="https://twitter.com/Oloni/status/927333497538252800?ref_src=twsrc%5Etfw">November 6, 2017</a></blockquote>

 <blockquote class="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr"><a href="https://twitter.com/Oloni?ref_src=twsrc%5Etfw">@Oloni</a> I didn&#39;t know what to say after he said yes šŸ˜ <a href="asdasd">pic.twitter.com/aRcbEIaF06</a></p>&mdash; keshef mir (@keshefmir) <a href="https://twitter.com/keshefmir/status/923566544637984768?ref_src=twsrc%5Etfw">October 26, 2017</a></blockquote>


 <blockquote class="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr">Thereā€™s a severe weather warning out for Sydney and the NSW south coast today. <a href="https://twitter.com/hashtag/9News?src=hash&amp;ref_src=twsrc%5Etfw">#9News</a> <a href="asdasd">pic.twitter.com/J43t8Z4wJ2</a></p>&mdash; Nine News
  Sydney (@9NewsSyd) <a href="https://twitter.com/9NewsSyd/status/927250318454169601?ref_src=twsrc%5Etfw">November 5, 2017</a></blockquote>

</div>

I have a sample codepen to show this https://codepen.io/hellouniverse/pen/QOEKdZ

How do I make these centred?

Upvotes: 4

Views: 3092

Answers (4)

Houcine Bouhouya
Houcine Bouhouya

Reputation: 1

I want to share publications and clips with Facebook, Twitter, and some other applications for hobby only, without commercial advertisements or the like, and without violating the rights of others.

Upvotes: 0

kvvu
kvvu

Reputation: 51

UPDATE :

Use class="twitter-tweet tw-align-center" instead.

Embeded tweet parameter reference

Upvotes: 5

user8891638
user8891638

Reputation: 

.my-container{
    margin:auto;
    width:200px;    
}

This is working. Now It's up to you how you will adjust the width.

Upvotes: 4

Hello Universe
Hello Universe

Reputation: 3302

This is also possible by adding align="center".

Upvotes: 0

Related Questions