Display labels left upper from text field

StackOverflow https://stackoverflow.com/questions/22157533

  •  19-10-2022
  •  | 
  •  

Question

I want my labels display left up in the text-fields, here is the screenshot where i want them exactly http://s20.postimg.org/p8h11xrot/label_1.png. I don't know really how to do that i tried with text-align or float: left.

this is my css file:

body {

}

#container{
    background-color:#ccccff;
    width:100%;
    margin-left:auto;
    margin-right:auto;

}
.content {
    padding: 5px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
label {
  text-align: center;

}
article p{
    text-align:center;    
}
header{
    width: auto;
    height: 100px;
    background-color: #ffffff;
    background: url(image.png) center center no-repeat;
    text-align:center;
}
footer{
    text-align:center;
    background-color: #999999;
}

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Intes - Register</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header> Header Image </header>
        <section id="container">
            <article><p>Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Sed eget vehicula sapien.
                Donec vitae quam id dolor pretium viverra. 
                Nulla viverra quam eget fringilla ultrices.</article>

            <label>First Name</label>
            <br />
            <div class="content">
            <input type="text" name="first_name" size="50">
            <br />
            </div>
            <label>Last Name</label>
            <br />
            <div class="content">
            <input type="text" name="last_name" size="50">
            <br />
            </div>
            <label>E-mail Address</label>
            <br />
            <div class="content">
            <input type="text" name="email_address" size="50">
            <br />
            </div>
            <div class="content">
            <input type="submit" value="Register">
            </div>
        </section>
        <footer>copyright stuff</footer>
    </body>
</html>
Was it helpful?

Solution

To have your desired visual effect you need to figure out to center the form and get the labels to show above the inputs.

#container{
  text-align: center;
}

/* FORMS */
#my_form {
  display: inline-block;
  text-align: left;
  line-height: 1.5;
}
 #my_form  label {
  display: block;
}
#my_form input {
    margin: 0.25em 0 0.5em;
}

http://fiddle.jshell.net/g4yzZ/13/
http://fiddle.jshell.net/g4yzZ/13/show

OTHER TIPS

Float your .labels and input elements to the left {float:left} and use {clear:right} on the labels.

Give the label or container a width, and then use text-align: left. It should work.

label {
    width: 100px;
    text-align: center;
}

You can accomplish this with width.

The trick is to wrap the input and label tags in wrapper divs. You almost got there, but the nesting in your code was off.

Once that's done, you can set the content class to the width of your inputs, 333px and align it center with margin, then text-align left the labels, which are now flush with the inputs.

The working code is here: http://jsfiddle.net/bronzehedwick/xpB3v/

And the relevant css:

.content {
  padding: 5px;
  width:333px;
  margin: 0 auto;
}
label {
  text-align: left;
  display: block;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top