CSS aligning form inputs and inline-block elements

Question

I would like to align my icon elements with the form inputs. This is what I have so far:

<div class="ctr">
    <div class="icon-ctr">
        <span class="icon"></span>
    </div>
    <input type="text" />
</div>

and the css:

.ctr {
    font-size: 0;
}

.ctr input {
    font-size: 14px;
    line-height: 14px;
    height: 14px;
    width: 100px;
    padding: 13px;
    border: 1px solid #000;
}

.icon-ctr {
    display: inline-block;
    height: 16px;
    padding: 12px;
    border: 1px solid #000;
    margin-right: -1px;
}

.icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-color: #f00;
}

You'll notice that the elements don't align in a straight line as I had hoped. Firstly what property is causing this? And secondly what is the most appropriate way to align the elements in a straight line?

I would wrap the input in a div that has the same height as the icon div. that way you can properly align the contents of both. Also, don't use padding to center things, use vertical-align. developer.mozilla.org/en-US/docs/Web/CSS/vertical-align — Rorschach120
– Rorschach120, Commented Mar 29, 2015 at 3:42
I know that if you use float: left instead of display: inline-block that they do line up correctly. Interesting that inline-block isn't working I'm going to check into that. — Jacob
– Jacob, Commented Mar 29, 2015 at 3:44

Liftoff · Accepted Answer · 2015-03-29 03:55:57Z

2

Inline block elements, by default, align to the baseline of the previous element.

All you need to do is vertically align the input to the top of the icon.

.ctr input
{
    vertical-align: top;
}

JSFiddle

answered Mar 29, 2015 at 3:55

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neilos Over a year ago

Whilst the other answers were good and answered how to solve the problem, this answer gave reason for the issue I was describing. Works a treat, and explains why floating the elements works too as floated elements are taken out of the normal flow and are then not positioned relative to the preceding element's baseline.

Tamil Selvan C · Accepted Answer · 2015-03-29 03:48:09Z

0

Use in .icon-ctr add float: left;

.ctr {
  font-size: 0;
}
.ctr input {
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  width: 100px;
  padding: 13px;
  border: 1px solid #000;
}
.icon-ctr {
  display: inline-block;
  float: left;
  height: 16px;
  padding: 12px;
  border: 1px solid #000;
  margin-right: -1px;
}
.icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  background-color: #f00;
}

<div class="ctr">
  <div class="icon-ctr">
    <span class="icon"></span>
  </div>
  <input type="text" />
</div>

answered Mar 29, 2015 at 3:48

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

Collectives™ on Stack Overflow

CSS aligning form inputs and inline-block elements

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related