I'm diving into React.js and flexbox, trying to center an h2 and a button in a flexbox layout. Despite using justify-content: center, margin: auto, and text-align center, I can't get the formatting right. I know I must be missing something, but I'm not sure what it is. Any tips would be greatly appreciated.
<header className={styles.header}>
<div className={styles.spacing}></div>
<div className={styles.logoaccount}>
<img></img>
</div>
<div className={styles.spacing}></div>
<div className={styles.searchsearch}>
<h2>Japanese</h2>
<button>Search</button>
</div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.filters}>
<button className="location">Location</button>
<button className="food-type">Food-type</button>
<button className="rate">Rate</button>
<button className="apply-filters">Apply-Filters</button>
</div>
*{
margin: 0;
padding: 0;
}
.header{
text-align: center;
}
.logoaccount{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.logoaccount > button{
border-radius: 5px;
}
.filters{
width: 75%;
display: flex;
margin: auto;
justify-content: space-between;
}
.filters > button{
width: 15%;
}
.searchsearch{
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.spacing{
height: 20px;
}
Here's what I'm seeing:https://i.sstatic.net/YHfWM.png https://i.sstatic.net/4RZwj.png
But I really want that second line with "Japanese" and "Search" to be perfectly centered. I've searched everywhere for a solution, but no luck so far. Thanks a lot!
Update: I added background color for clarity.