How to properly align something that resizes in a specific location


Tags: css,html,resize,alignment,center

Problem :

Alright I am working on a webpage and when you attempt to fill in a login form or register form it has a message pop-up if anything goes wrong... Or right. And I would like it in the center of the planet image. It is a Div. Also to note the planet image has text as part of it underneath so using the image for a center reference is out of the question. I merely want to know how I can Set the middle point to always be the same so when more than one error/message occurs it won't be off center and it would look nice as it grows with every message added. I'm not disclosing the name of the site for personal reasons.

Image: enter image description here

( Sorry for the potato quality )

CSS:

#banner{  
    width: 800px;  
    margin-left: -400px;  
    left:50%;  
    top: 100px;  
    margin-bottom: 20px;  
    font-size: 15px;  
    font-weight: bold;  
    color:rgb(255,255,255);  
    text-align: center;  
    line-height: 30px;  
    border-radius: 15px;  
    position: absolute;  
}

Html and Php:

<?php 
if (empty($_SESSION['errors']) === false) {
    echo '<div id="banner" style="background-color:rgb(120,0,0);">';
    output_errors($_SESSION['errors']);
    echo '</div>';
    $_SESSION['errors'] = NULL;
}

if (empty($_SESSION['message']) === false) {
    echo '<div id="banner" style="background-color:rgb(0,100,0);">';
    output_errors($_SESSION['message']);
    echo '</div>';
    $_SESSION['message'] = NULL;
}
?>

The function output_errors just turns an array to a string and echos it.



Solution :

Sounds like you want errors to be overlaid 500px in their container. Using a 1000px high div and display: table-cell:

HTML

<div id="table">
    <div id="cell">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

CSS

#table {
    width: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1000px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}

And anything inside #cell should be centered at 500px of whatever contains #table. Example.


    CSS Howto..

    How to change the css of child and subchild menu's border together

    How does -ms-view-state differ from standard CSS Media Queries Expressions?

    How to jump to a tab position (or equivalent) in html or css

    css: How to make elements not to overlap + automatically place them in a relevant position

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    How to center video source in circle shape using css, html

    How to animate back after click with CSS?

    How to use the not selector correctly in CSS [duplicate]

    How to make a background-color transition that eventually covers div to center? [closed]

    How to make a custom clickable shape with CSS to cover the exact needed area?

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    CSS exit box how to? [closed]

    How to show image based on sort type in GridView

    How to Apply CSS to Facebook Login Button [closed]

    How to rotate a div

    How to horizontally stack elements using CSS?

    How to apply css styles in embed widget

    How to split page and reveal stuff underneath?

    how to identify if a css class has property in extjs

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf

    How to override css grouped styles

    How can I indent all text in a paragraph except the first line?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How can I change the ckeditor iframe CSS styling

    how to show like chat box for the div/p tag top left/right corners

    How is it possible to modify the gap between a bullet and its list text?

    How to reduce shiny interactive rmarkdown margins?

    how to design like this form in html

    CSS simple menu - how to align?

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle