Note that there are some explanatory texts on larger screens.

plurals
  1. POAligning the button in the center after the text inside of custom alert box
    primarykey
    data
    text
    <p>I need your help.</p> <p>How can the HTML/CSS properties be adjusted so as to allow the OK button to appear in the center of my custom alertbox and just after the text?</p> <p>I can't, for the life of me figure as to how to do this. =\</p> <p>Here is what is happening: <img src="https://i.stack.imgur.com/H92rH.png" alt="enter image description here"></p> <p>Here is my desired result: <img src="https://i.stack.imgur.com/LaMbn.png" alt="enter image description here"></p> <p>Here is the html markup:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; /*-------------------------------------------------------------------------------------------------- CUSTOM ALERT BOX --------------------------------------------------------------------------------------------------*/ #alertBox { height: 100px; width: 500px; bottom: 50%; right: 50%; position: absolute; font-family: tahoma; font-size: 8pt; visibility: hidden; } #alertBox_container { background: rgb(212,208,200); left: 50%; padding: 10px; top: 50%; margin: 0; padding: 0; height: 100%; border: 1px solid rgb(128,128,128); height: 100%; position: relative; } #alertBox_titlebar { height: 22px; width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1); color: white; line-height:22px; font-weight: bold; } #alertBox_close { line-height: 10px; width: 18px; font-size: 10px; font-family: tahoma; margin-top: 1px; margin-right: 2px; position:absolute; top:0; right:0; font-weight: bold; } #alertBox_text { position: absolute; width: 100%; height: auto; top: 50%; text-align: center; } #alertBox_btn{ position: relative; width: 40px; height: auto; text-align: center; } &lt;/style&gt; &lt;script type="text/javascript"&gt; //alertBox('text','ok') function alertBox(text) { document.getElementById('alertBox_text').innerHTML = text document.getElementById('alertBox').style.visibility = 'visible' } function alertBox_hide() { document.getElementById('alertBox').style.visibility = 'hidden' } &lt;/script&gt; &lt;/head&gt; &lt;body onload="alertBox('this is a test')"&gt; &lt;div id="alertBox"&gt; &lt;div id="alertBox_container"&gt; &lt;div id="alertBox_titlebar"&gt;&lt;span style="padding-left: 3px;"&gt;IMTS&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"&gt;&lt;/div&gt; &lt;div id="alertBox_text"&gt;This is some sample text that will appear here&lt;/div&gt; &lt;div id="alertBox_btn"&gt;&lt;input type="button" value="OK"&gt;&lt;/div&gt; &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