Photoshop Question posted in
The official user guide can be found here.

CSS Aligning labels with inputs – Photoshop

I have a form as exemplified by this fiddle, https://jsfiddle.net/ejkvp88v/2/. Essentially, I have a form whose inputs are all center aligned which is exactly how I want them to appear, however I would very much like to have the labels for the inputs above the input but aligned with the left side of them. and to this point I have found I have had a great deal of trouble achieving this. I’ve tried looking at a few different questions here on S.O. to no avail, so hopefully someone can point me in the right direction on this. I’ve included my current HTML and CSS below for reference.

To sum up, I’m trying to maintain the form inputs being centered in the page, but I want their labels to be above the inputs and aligned with the left side of the inputs.

First, here’s the form html:

<div class="container">
<div class="base-template">
     <h1>A form whose labels need some aligning</h1>

    <p class="lead">Use the form below to submit some information.</p>
</div>
<div class="container">
    <div class="table-responsive">
        <div class="request-form-container">
            <form action="" method="post" accept-charset="utf-8">
                <label for="email" class="formLabel">E-Mail Address</label>
                <br />
                <input type="text" name="email" value="" id="email" size="30" />
                <br />
                <br />
                <label for="firstName" class="formLabel">First Name</label>
                <br />
                <input type="text" name="firstName" value="" id="firstName" size="30" />
                <br />
                <br />
                <label for="lastName" class="formLabel">Last Name</label>
                <br />
                <input type="text" name="lastName" value="" id="lastName" size="30" />
                <br />
                <br />
                <button name="" type="submit" id="submitButton" class="btn btn-default btn-default">Submit&nbsp;<span class="glyphicon glyphicon-transfer"></span>
                </button>
            </form>
        </div>
    </div>
</div>

Here is my CSS file, I am using bootstrap on this project, so what’s here is just some specific modifications I’ve made for the sake of customization.

body {
padding-top: 50px;
}

.base-template {
padding: 40px 15px;
text-align: center;
color: #060a84;
}
a {
color: #060a84;
}
.formLabel {
color: #060a84;
}
.request-form-container {
padding: 0.5em;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
.successMessage {
text-align: center;
}
.submitFormContainer {
margin-top: 1.6em;
}
#navbar {
background-color: #525eab;
}
.navbar-inverse {
background-color: #525eab;
}
.nav-bar-fixed-top {
background-color: #525eab;
}
.navbar-inverse .navbar-brand {
color: white;
}
.error {
color: red;
font-weight: bold;
font-size: 1.1em;
}

And finally, here is how I would like the form to appear. I created this image in photoshop as just a quick demonstration of what I’m trying to do.

enter image description here

Tags:

4

Answers


  1. 0

    Put your fields in a container (span or div). Align the container centre and leave the fields aligned left inside the container. Then the labels will be easy to align with the field below.

    Login or Signup to reply.
  2. 0

    The easiest way to accomplish what you want is to wrap each label and input field in a div and have the text-align: center take affect on that element. You will need to apply some style to the wrapper in order for it to behave like an inline element and have the centering work.

    This approach also avoids having to specify width on any of the elements which should allow it be more flexible in case you want to display on different screen sizes.

    <div class='input-wrapper'>
  <label for="email" class="formLabel">E-Mail Address</label>
  <br />
  <input type="text" name="email" value="" id="email" size="30" />
</div>

    Then the style:

    .input-wrapper {
  display: inline-block;
  text-align: left;
}

    Here is a fiddle showing it working:
    https://jsfiddle.net/ta0pesyb/

    Login or Signup to reply.
  3. 0

    The easiest way is to put everything in a container that has a defined width , and then use the margin: auto rule to center it.

    Keep the default text-alignement (to the left), and adjust the width of the container depending on where you want your inputs placed.

    Exemple : https://jsfiddle.net/ejkvp88v/4/

    .request-form-container{
    width: 400px;
    margin:  auto;
    text-align: left;
}
    Login or Signup to reply.
  4. 0

    A solution is to use display: inline-block; and align label text left, but you have to fix the width of the label text. Add the following to your CSS:

    label { display: inline-block; width: 245px; text-align: left; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search