Home/ Questions/Q 7867857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T00:49:08+00:00

I am trying to center some text and a form (text input and submit

  • 0

I am trying to center some text and a form (text input and submit button) over an image that is already centered.

My HTML/CSS has the three items centered but one after the other i.e. the image is centered, the text is centered below it and my input form is below that.

Can you let me know how I can center my text and form over a image that is centered. The over goal is to have the three items stay centered together if the browser window’s size is changed.

NOTE: I have other images and text above the three items that I am trying to center

My HTML is as follows:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>test</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div class="banner">
        <img src="banner.png" alt="banner" height="250" width="900" />
    </div>

    <p class="textbox">
    some text. some text.some text.some text.some text.some text.some text.some text.some text.
    </p>

    <--Below is the HTML for the centering of the three items. They are centered sequentally NOT on top of the image.

    <div class="formoutline">
        <img src="formboxdark.png" alt="formbox" height="160" width="350" />
    </div>

    <div class="signupnote">
        </p>please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.</p>
    </div>

    <div class=formlocation>
        <form name="input" action="html_form_action.asp" method="get">
            <input type="text" name="user" class="emailfield" value="email@example.com" />
            <input type="submit" class="submitbutton" value="Submit" />
        </form>

</div>
</div>
</body>
</html>

My CSS is as follows:

 body
    {
    margin: 0;
    padding: 0;
    height: 100%;
    background:url(texture.jpg);
    }
    .banner
    {
    text-align:center;
    margin-top:15px;
    margin-bottom:0px;
    padding:0px;
    }
    .textbox
    {
    text-align: center;
    color:white;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size:15px;
    }

    /*This is where the CSS for the three items (image, text and form) begins*/

    .formoutline
    {
    text-align:center;
    top:330px;
    left:485px;
    }
    .signupnote
    {
    text-align: center;
    color:#225DCE;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size:13px;
    }
    .formlocation
    {
    text-align:center;
    }
    .emailfield
    {
    text-align:center;
    height:20px;
    width:200px;
    }
    .submitbutton
    {
    height:28px;
    width:70px;
    }

If you need any further details please let me know.

Thanks in advance for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The content that you want to center together should all be in one div tag, not 3 seprate one as you have there:

    <--Below is the HTML for the centering of the three items. They are centered 
sequentally NOT on top of the image.

<div class="style for single containing div">

</p>please sign up.please sign up.please sign up.please sign up.please sign up.please  
sign up.please sign up.please sign up.please sign up.</p>

<form name="input" action="html_form_action.asp" method="get">
        <input type="text" name="user" class="emailfield" value="email@example.com" />
        <input type="submit" class="submitbutton" value="Submit" />
</form>
</div>

    Style for that div:

    .style for single containing div
{
margin: 0 auto; (this will center your div absolutely, even when resizing your window)
background-image: url('formboxdark.png');
background-repeat: no-repeat;
background-position: center;
height: 160px; 
width: 350px; 
text-align: center;
}

    Try that and let me know

    • 0