Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting the text inside a div to be dead center (vertical and horizontal)
    primarykey
    data
    text
    <p>I need your help,</p> <p>How can the text inside the white part of the box be aligned dead center (aligned both vertically and horizontally)?</p> <p>See picture below:</p> <p><img src="https://i.stack.imgur.com/w9TyB.png" alt="enter image description here"></p> <p>The desired result is:</p> <p><img src="https://i.stack.imgur.com/zQWrc.png" alt="enter image description here"></p> <p>Here's the HTML markup:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Centered Div&lt;/title&gt; &lt;style&gt; #wrapper { height: 100px; width: 500px; bottom: 50%; right: 50%; position: absolute; font-family: tahoma; font-size: 8pt; font-weight: bold; } #container { background: #FFF; left: 50%; padding: 10px; top: 50%; margin: 0; padding: 0; height: 100%; border: 1px solid rgb(128,128,128); height: 100%; position: relative; } #inner1 { height: 100%; border: 1px solid blue; } #inner2 { height: 100%; border: 1px solid green; } #titlebar { cursor: pointer; height: 23px; width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1); color: white; line-height:22px; } #button { line-height: 10px; width: 18px; font-size: 10px; font-family: tahoma; margin-top: 1px; margin-right: 2px; position:absolute; top:0; right:0; } #alertText { } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="container"&gt; &lt;div id="titlebar"&gt;&lt;div style="padding-left: 3px;"&gt;Information Box&lt;/div&gt;&lt;/div&gt; &lt;div&gt;&lt;input id="button" type="button" value="X"&gt;&lt;/div&gt; &lt;div id="alertText"&gt;This is some sample text that will appear here&lt;/div&gt; &lt;/div&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.
    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.
 

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