WordPress has a neat built-in feature that, when composing a post, if you put the URL to a specific tweet on its own line, like this…
https://twitter.com/rgriff/status/827901296258584576
…then WordPress will automatically convert it to a tweet link, like this:
Current forecast for the Portland area: Sunday night we may see a foot of snow…or perhaps just a cold rain.
I love weather forecasts.
— Rob Griffiths (@rgriff) February 4, 2017
By default, though, the embedded tweets will be left-aligned. I wanted them center aligned, as above. And because I just wasted 15 minutes figuring this out, I'm documenting the solution here to save myself future aggravations…
I thought a center align would be as simple as wrapping the tweet URL line in a center-aligned div, but that doesn't work. So I searched the web and found pages of results. After trying and failing with many of those solutions, I finally got smart and looked at the source code…should've done that first.
Embedded tweets—at least as of 4.7.2—are assigned to a class named twitter-tweet. So to center all embedded tweets, you just need to add a simple class definition to your theme's CSS:
/* Center the damn tweets */
.twitter-tweet {
margin: 0 auto !important;
}
Note: The aggravated tone in the style comment is completely optional.
.twitter-tweet {
margin: 0 auto;
}
works fine.
!important
is not needed.Any idea why this won't work on Safari? I've tried various permutations and they all work in Chrome, but none are working in Safara where the Tweets remain aligned left.
thanks!
Works fine in my testing on Safari. Can you provide the URL of your site?
whooops, I forgot the link!
https://www.thelionsroaratpsu.org/home/neither-snow-nor-rain/
password: baseball
thanks!
In viewing the source, I don't see that the margin: 0 auto CSS has been applied. If I add that in in the source editor, the tweet is centered.
-rob.
I've tried different variations of the code. I just changed it to this:
}
/* center twitter object*/
twitterwidget {
margin:0 auto
} !important;
width: 100% !important;
min-width: 320px !important;
max-width: 320px !important;
}
It's still not centering in my version of Safari Version 10.0.3 (11602.4.8.0.1), but is in Chrome
That fixed it! Thanks so much!!
-Will
Glad it worked!
-rob.
Willy - You need to apply it to the twitter-tweet class, as shown in the post. Just add the class as shown (or without the !important should also work) to your CSS, and it should work fine.
-rob.
Comments are closed.