Hi,
In the header, I want to place the title (red box) in the middle, vertically and horizontally, as seen in the prototype below.
I tried to ".title",
display: flex;
align-items: center;
It didn't work.
How would I do?
Hosun Kang
The Tittle was edited by Moderator.
You need to appply 'align-items: center' to the 'header css' NOT the 'title css' plus add 'flex: 1' to the 'title css' so that container consumes the remaining horizontal space, then you can apply 'text-align: center' to the h1, see below:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background-color: #42A240;
padding: 20px 40px;
}
.logo {
}
.title {
flex: 1;
}
h1 {
margin: 0;
padding: 0;
font-family: "abril-fatface";
font-size: 16px;
font-weight: 400;
color: white;
text-align: center;
}
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices