Databases
StackOverflow2013
Postsdbo
POCenter-aligning a div inside a div, and a div inside a div inside a div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter-aligning a div inside a div, and a div inside a div inside a div
    text
    copied!<p>I am having troubles aligning one of my divs in the center (horizontally), and another one of my divs in the center (vertically).</p> <p>The Horizontal div, is the the wrapper for the middle section of the website (the buttons).</p> <p>The vertical div is the wrapper for the "Eller" in between the buttons.</p> <p><a href="http://vilduhelst.dk" rel="nofollow">Http://wwww.vilduhelst.dk</a></p> <p>I have already tried using the "Margin: 0px auto;" property, without any result at all.</p> <p>This is my CSS code:</p> <pre><code>body{ background: url(media/pattern.png); } .headerdiv{ text-align:center; margin-top:50px; width:223px; height:121px; background: url(media/logo.png) no-repeat bottom; margin-left:auto; margin-right:auto; } .topbardiv{ padding-top:60px; text-align:center; background: url(media/HeaderDepression_shadow.png) no-repeat bottom; } #buttons{ margin-top:100px; width:100%; height:227px; text-align:center; } .buttonscontent{ width:90%; margin: 0px auto; } .reddiv{ float:left; display:inline; background: url(media/RedButtonShadow.png) no-repeat bottom; } .redbutton{ background: url(media/RedButton.png) no-repeat bottom; width:387px; height:227px; border:none; display:inline; margin-bottom:25px; } .redbutton:hover{ background: url(media/RedButtonHover.png) no-repeat bottom; } .redbutton:active{ background: url(media/RedButtonOnclick.png) no-repeat bottom; } .textdiv{ text-align:center; float:left; padding-left:30px; padding-right:30px; height:200px; } .textdivcontent{ background: url(media/Eller.png) no-repeat; height:95px; width:129px; } .bluediv{ display:inline; float:left; background: url(media/RedButtonShadow.png) no-repeat bottom; } .bluebutton{ background: url(media/BlueButton.png) no-repeat bottom; width:387px; height:227px; border:none; display:inline; margin-bottom:25px; } .bluebutton:hover{ background: url(media/BlueButtonHover.png) no-repeat bottom; } .bluebutton:active{ background: url(media/BlueButtonOnclick.png) no-repeat bottom; } .footerseperation{ padding-top:175px; text-align:center; background: url(media/FooterSeperation.png) no-repeat bottom; } .copyright{ background: url(media/copyright.png) no-repeat bottom; margin-left:auto; margin-right:auto; width:205px; height:24px; } </code></pre> <p>This is my HTML code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Hvad vil du helst? - Dilemma&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="headerdiv"&gt; &lt;/div&gt; &lt;div class="topbardiv"&gt; &lt;/div&gt; &lt;div id="buttons"&gt; &lt;div class="buttonscontent"&gt; &lt;div class="reddiv"&gt; &lt;input type="button" class="redbutton" /&gt; &lt;/div&gt; &lt;div class="textdiv"&gt; &lt;div class="textdivcontent"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="bluediv"&gt; &lt;input type="button" class="bluebutton" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="footerseperation"&gt; &lt;/div&gt; &lt;div class="copyright"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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