skip to Main Content

I have this simple template:

<div className="wrapper">
      <div className="block one">
        <GoSearch />
        15
      </div>
      <div className="block two">test</div>
    </div>

with this css:

.wrapper {
  display: flex;
  width: 100%;
  margin-top: 40px;
  justify-content: center;
  align-items: center;
}

.block {
  flex: 1;
  background-color: red;
}

looking like this:

enter image description here

Why is the icon not centered vertically? I also tried with vertical-align: middle directly to the svg

2

Answers


  1. Chosen as BEST ANSWER

    .one also needs this style:

    display: inline-flex;
    align-items: center;
    

  2. Add flex-direction: column; as the default value for this property is row.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search