Why won't elements stay on the same line?

Question

I've tried all sorts of displays and positions to get all these elements on the same line, but for some reason, the button "Add" is in a weird position. Also, the center of the slash isn't horizontally aligned with the center of the boxes, it should be a little further up. The main issue is getting all of these elements on the same line, I want to somehow have their centers all be on the same imaginary horizontal line. How do I do that? Here's the jsfiddle,

#slash {
  font-size: 50px;
  color: #E86B00;
  display: inline-block;
}

textarea {
  border: 3px solid #FF9333;
  resize: none;
  height: 30px;
  width: 50px;
}

textarea:focus {
  border: 3px solid #E86D00;
  outline: none;
}

button {
  height: 30;
  width: 70;
  color: #FFFFFF;
  background-color: #FF7800;
}

button:hover {
  background-color: #E86D00;
  cursor: pointer;
}

button:active {
  background-color: #FF8315;
  border-right: 2px solid #DCDCDC;
  border-bottom: 2px solid #DCDCDC;
  border-top: 2px solid #ADADAD;
  border-left: 2px solid #ADADAD;
}

<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id="slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();">Add</button>

LMGTFY... https://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements... https://www.w3schools.com/css/css3_box-sizing.asp... — Gabriel, May 28 '20 at 01:00
you can use flex box css. it will help you. [https://www.w3schools.com/css/css3_flexbox.asp](https://www.w3schools.com/css/css3_flexbox.asp) align-items:'center' this property will help you set all content in vertical middle. — Nilesh Chavan, May 28 '20 at 01:42

Zach P. · Accepted Answer · 2020-05-28T01:39:54.720

You must align them with vertical-align. I have added that to the elements below.

  #slash {
     font-size: 50px;
     color: #E86B00;
     display: inline-block;
vertical-align:middle;
  }
  textarea {
     border: 3px solid #FF9333;
     resize: none;
     height:30px;
     width:50px;
vertical-align:middle;
  }
  textarea:focus{
     border: 3px solid #E86D00;
     outline: none;
  }
  button {
    height: 30; width: 70;
    color: #FFFFFF;
    background-color: #FF7800;
vertical-align:middle;
  }
  button:hover {
    background-color: #E86D00;
    cursor: pointer;
  }
  button:active {
    background-color: #FF8315;
    border-right: 2px solid #DCDCDC;
    border-bottom: 2px solid #DCDCDC;
    border-top: 2px solid #ADADAD;
    border-left: 2px solid #ADADAD;
  }

<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id = "slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();" >Add</button>

score 0 · Answer 2 · answered May 28 '20 at 01:44

0

I would recommend you keep all the element inside one div and add these css properties to the div: display:flex, align-items:center

answered May 28 '20 at 01:44

Samip Poudel

16
1
2

Why won't elements stay on the same line?

2 Answers2