CODEWITHSUNDEEP
htmlcss
methuselah
methuselah

Reputation: 13206

Left align form labels and space out input elements

I'm struggling to left align the labels on my form and space out the input and button element/s. Can anyone offer any advice on how I can get it done, while keeping the input elements centred?

CSS code:

.bt input {
    border: 1px solid #ccc;
    color: rgb(60, 60, 60);
    display: block;
    width: 80%;
    padding: 1em;
    margin: 0 auto;
}

.bt button {
    width: 100%;
    padding: 1.5em;
    background-color: #1f1f1f;
    color: #fff;
    border: 0;
}

.bt button:hover {
    background-color: #818181;
    cursor:pointer;
}

.fbc {
    text-align: center;
}

.bt .fb {
    background-color: #D5D5D5;
    padding: 2em;
    color: #585858;
    display: inline-block;
    width: 50%;
}

HTML code:

 <div class="bt fbc">
            <div class="fb">
            <label>Name (Required)
            <input type="text" placeholder="Name" required autofocus> 
            </label>
            <label>Email (Required)
            <input type="text" placeholder="[email protected]" required autofocus> 
            </label>
            <button>SUBMIT BOOKING</button>
            </div>
        </div>

Jsfiddle: http://jsfiddle.net/r11qv9kh/1/

Upvotes: 1

Views: 185

Answers (3)

dfsq
dfsq

Reputation: 193261

Define new styles for labels:

.bt label {
    margin-bottom: 1em;
    display: block;
    box-sizing: border-box;
    padding: 0 10%;
    text-align: left;
}

and change width styles for inputs:

.bt input {
    ...
    width: 100%;
    box-sizing: border-box;
}

And in this case you don't have to modify HTML.

Demo: http://jsfiddle.net/r11qv9kh/3/light/

Upvotes: 1

Josh KG
Josh KG

Reputation: 5140

Your labels are inline elements, and therefore will get their text alignment from their parent element. You can give them a block display and assign their text alignment directly to get them going left.

HTML:

<label for="name">Name (Required)</label>
<input id="name" type="text" placeholder="Name" required autofocus>

CSS:

.bt label {
    text-align: left;
    display: block;
}

Fiddle: http://jsfiddle.net/r11qv9kh/2/

Upvotes: 1

Stan Shaw
Stan Shaw

Reputation: 3034

This will align your labels to the left:

Text-align: left;

Upvotes: 0

Related Questions