CODEWITHSUNDEEP
htmlcsscss-float
sbrbot
sbrbot

Reputation: 6469

Positioning form elements and their labels in row

How to position input form elements with their labels like this but not using table? Labels should be centered above input elements and blocks in row should be centered within outer block.

+----------------------------------------------+
|       label1       label2       label3       |
|    [..........] [..........] [..........]    |
+----------------------------------------------+

There could be 1, 2, 3 or more elements in the same row.

I tried this:

    .outer{text-align:center;}
    .inner{float:left;}
    <form>
      <div class="outer">
        <div class="inner">
          <label for="l1">label1</label><br><input id="l1" name="label1">
        </div>
        <div class="inner">
          <label for="l2">label2</label><br><input id="l2" name="label2">
        </div>
        <div class="inner">
          <label for="l3">label3</label><br><input id="l3" name="label3">
        </div>
      </div>
    </form>

Upvotes: 0

Views: 980

Answers (2)

Randy
Randy

Reputation: 9849

Place them in the same div, and center the text in that div:

.wrapper {
  text-align:center;
}

.wrapper * {
  text-align:left;
}

.okay {
  display:inline-block;
}

.okay p {
  text-align:center;
}
<div class="wrapper">
 <div class="okay">
  <p>text</p>
  <input type='text'>
 </div>
 <div class="okay">
  <p>text</p>
  <input type='text'>
 </div>
 <div class="okay">
  <p>text</p>
  <input type='text'>
 </div>
</div>

Upvotes: 1

vignesh
vignesh

Reputation: 1011

Its also possible through bootstrap framework also.. which makes responsive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>

    </style>
</head>
<body>
    <form>
    <div class="col-md-4 text-center">
          <div class="form-group">
            <label for="label1">label</label>
            <input type="text" class="form-control" id="label1" placeholder="labeltext">
        </div>
    </div>
    <div class="col-md-4 text-center">
        <div class="form-group">
            <label for="label2">label</label>
            <input type="text" class="form-control" id="label2" placeholder="labeltext">
        </div>
    </div>
    <div class="col-md-4 text-center">
        <div class="form-group">
            <label for="label2">label</label>
            <input type="password" class="form-control" id="label2" placeholder="labeltext">
        </div>
    </div>
</form>
</body>
</html>

Upvotes: 1

Related Questions