<select> having weird margins?

HTML-CSS
1

How come tags are weird when it comes to flexbox? They seem to not center vertically.

My codepen internet location --> https://codepen.io/Mike-was-here123/pen/vaRjey?editors=1000

If you scroll down you an see that my select box (orange) is not aligned with the h3 text.

In the html line 48 it is

<div class="row-item ">
            <h3>What is your current role?</h3>
            <select>
              <option>Student</option>
              <option>Full Time Job</option>
              <option>Full Time Learner</option>
              <option>Pefer not to say</option>
              <option>Other</option>
            </select>
            </div>

I join the <h3> and the <select> using .row-item

(CSS line 46)

.row-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
select {
  font-size: 25px;
  height: 40px;
  border: 1px solid orange;
}

Now why does the <select> appear not to be aligned? Can i fix this without using specific margins?

image
image1920×1040 349 KB

image
image1920×1040 516 KB

2

On the row-item class, add align-items: center; :slight_smile:

1 Like
3

You need to align your items vertically. Try adding align-items: center to the row-item class

4

How come some certain items don’t naturally vertically? Kinda weird.