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:
Why is the icon not centered vertically? I also tried with vertical-align: middle directly to the svg
2
Answers
.one
also needs this style:Add
flex-direction: column;
as the default value for this property isrow
.