Align elements in td in one line

Question

I have a table where in head row there are 2 textareas and 2 buttons. http://jsfiddle.net/8qzmxwa9/1/ I use margin: 0 auto;

style='white-space:nowrap;'

on elements to make them be in one line. But as you can see at fiddle they are a little bit uneven. How can I make them stay in one line.

Averse

Answer 1

textarea
{
  text-align: center;
  height: 35px;
  width: 280px;
  margin: 0 auto;
  font-size: 27px;

    vertical-align: bottom;
}

DEMO

Manisa

Answer 2

Add the same vertical-align to everything and remove the padding for textareas so they don't grow bigger. Like this:

table, th, td 
{
   border: 1px solid black;
   font-size: 27px;
    vertical-align:middle;
    display:inline-block;
}
textarea
{
  text-align: center;
  height: 35px;
  width: 280px;
  margin: 0 auto;
  font-size: 27px;
    padding:0;
} 
button
{
  margin: 0 auto;
  font-size: 27px;
}

Asyut

Answer 3

You can use display flex property to align items in one line :-

Suppose you have 3 buttons in a parent div, like this :-

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Now apply display: flex on parent and flex: 1 property on all the children you want to be aligned.

CSS file for the above HTML code will look like this,

.parent {
  display: flex;
}

.child {
  flex: 1;
}

Link for the above code

Link of answer for the question asked

Cacilie