Note that there are some explanatory texts on larger screens.

plurals
  1. POmargin: auto is not centering
    primarykey
    data
    text
    <p>In the following style from the website: <a href="http://6.470.scripts.mit.edu/css_exercises/exercise4.html" rel="noreferrer">http://6.470.scripts.mit.edu/css_exercises/exercise4.html</a></p> <pre><code>&lt;style type="text/css"&gt; #sponsors { margin:auto; margin-top:50px; overflow: hidden; width: auto; display: inline-block; } div.image img { margin: 3px; border: 1px solid #ffffff; } div.image a:hover img { border: 1px solid; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Sponsors of 6.470&lt;/h1&gt; &lt;div id="sponsors"&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/appian.png" width="150" height="85"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/dropbox.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/facebook.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/nextjump.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/palantir.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/quora.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/tripadvisor.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/vecna.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>if the <code>width: auto</code> is removed from <code>#sponsors</code> then the <code>div#sponsors</code> is not center aligned even though <code>margin: auto</code> is used. </p> <p>Similarly if instead of <code>text-align: center</code> is replaced by <code>margin: auto</code> in body style above, then the <code>&lt;h1&gt;</code> will not be center aligned which is preposterous; </p> <p>because I have used <code>margin: auto</code> a lot of times and it was able to center the content without any issue. So hence help me and I will appreciate this a lot.</p> <p>PS: I used firefox and besides use the <code>doctype</code> tag it is still not able to center with <code>margin: auto</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload