Aligning html inputs on same line

Viewed 166 times

Can somebody give a simple solution as to how to align form inputs on the same line, for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?

ex:

<style type='text/css'>
  form{
    display:inline;
  }
  textarea{
    font-size:25px;
    height:25px;
    width:200px;
  }
  input.button{
    height:25px;
    width:50px;
  }
</style>
<form>
  <textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>

Answers

Have you tried playing with the vertical-align css property?

vertical-align:top;

That way everything will look consistent and you won't have to play with margins.

Sunday, September 11, 2022

l0j1k

vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

See: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.

Sunday, December 4, 2022

top_questions

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.

<div class="buttonHolder">
  <input value="Search" title="Search" type="submit" id="btn_s"> 
  <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>

.buttonHolder{ text-align: center; }

Friday, November 18, 2022

user7393973

The <ul> is by default a block element, make it inline-block instead:

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}

CodePen Demo

Friday, October 14, 2022

dieki

check out this:http://jsfiddle.net/c8C8C/1/. do you want this?

I just only add vertical-align:middle in your img tag style attribute.

Monday, September 12, 2022

dcinadr

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

html

css

input

alignment

Aligning html inputs on same line

Answers

CodePen Demo

html,css,input,alignment