Centering a div containing embedded tweets

Question

In a very simple webpage, I would like to create a div containing a sequence of tweets, with the code from Twitter.

This div should be horizontally centered in the page; I tried with

<div style="text-align:center">

and with

<div style="width: 900px;  display: block;  margin-left: auto;  margin-right: auto;">

as in this post. The first solution does not center the div; the second moves the div progressively to the left of the page, when the width is increased (and the div is centered with low widths, say 200, 300).

Are there any other solutions? If possible without specifying a fixed width or percentage.

it works fine for me with `text-align:Center` http://jsfiddle.net/victor_007/ppgLjpza/1/ — Vitorino fernandes, Oct 21 '14 at 18:30
Related http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div?rq=1 — fauverism, Oct 21 '14 at 18:58

score 0 · Answer 1 · answered Oct 21 '14 at 18:21

The best way to center a div horizontally is to use margin: auto like you did. But you have to make sure the parent div is larger than the child. It will be centered in the parent.

<div style="width: 1000px;">
  <div style="width: 500px; margin: 0 auto">I'm align in the middle of my parent</div>
</div>

score 0 · Answer 2 · answered Oct 21 '14 at 18:21

0

margin: 0 auto;

Is what you need as long as the parent stretches the whole width, apply this to the style of that div, or use it as in a class.

answered Oct 21 '14 at 18:21

Zach Leighton

1,939
14
24

Centering a div containing embedded tweets

2 Answers2