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
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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.
    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