Menu
I'm looking for a way to display a confirm dialog that's always centered on the page, and floating over the page.
Tried that, but it's not 'always centered' at all, since the position is fixed:
.Popup { text-align:center; position: absolute; bottom: 10%; left: 27%; z-index:50; width: 400px; background-color: #FFF6BD; border:2px solid black; } Any idea? Thanks
705
To resolve this behavior and make the dialog to be viewed on the screen even on scrolling, set the dialog control wrapper CSS position as fixed and mention the top value. This will make the dialog to be shown in center of screen on scrolling the content of the web page.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
There is no way to float center in CSS layout. So, we can center the elements by using position property. Example 1: This example set the position of elements exactly at the center of the screen.
You can set float div center by using margin property. you does not need to use float property but you can use margin property and set left or right margin value auto by this way.
Try using this CSS
#centerpoint { top: 50%; left: 50%; position: absolute; } #dialog { position: relative; width: 600px; margin-left: -300px; height: 400px; margin-top: -200px; } <div id="centerpoint"> <div id="dialog"></div> </div> #centerpoint should be the container div of the dialog
Note that the #centerpoint DIV should be inside the body element or inside elements that don't have a position: relative; property
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
