Which elements do you want to center using flexbox?
I’m assuming you want to center the .container-body
It’s not centering because both elements on the .container-body(h1 and p) together are occupying 100% of the width. So, to fix it you should specify a width into the h1 and p. Keep in mind that the sum of both width should be less than the width of the .container-body
I did the following:
.container-body {
display: flex;
align-items: center;
justify-content: center;
}
.container-body p{
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
color: white;
width: 40% /* I set width to 40%, but can be a width that fits your needs*/
}
If you want to display the elements inside the .container-body as a column, you can add flex-direction: column; to the .container-body
You just need to add flex-direction: column; to .container-body:
.container-body {
display: flex;
flex-direction: column; /* <---- add this line */
align-items: center;
}
So I tried to center the text under the header in the vertically in the body. What I learned, was to use align-items, since I already changed the div’s display to flex. What could be the problem here?
I’m new to css and html so please be patient with me:
/*
Color-palette:
#b6b6b6
#4c4c4c
#343434
#0c0c0c
#c8984c
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-size: 62, 5%;
font-family: Arial, Helvetica, sans-serif;
background-color: #0c0c0c;
}
body {
width: 100%;
height: 100vh;
margin: 0px;
}
a {
text-decoration: none;
color: white;
font-size: 1.5rem;
}
.t {
color: #b6b6b6;
}
header {
background-color: #0c0c0c;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 50px 50px 10px;
align-items: baseline;
}
.logo {
color: white;
margin-left: 200px;
cursor: pointer;
}
.ul-navigation li {
display: inline;
padding-left: 40px;
}
.ul-navigation li a:hover {
transition: 0.5s ease;
color: #b6b6b6;
}
.container button {
background: #343434;
border: none;
border-radius: 25%;
padding: 15px 30px;
position: relative;
bottom: 10px;
margin-right: 200px;
}
.container button:hover {
background-color: rgba(211, 205, 198, 0.3);
transition-duration: 0.8s;
}
.contact-button a {
font-size: 1.25rem;
}
.container-body {
display: flex;
align-items: center;
flex-direction: column;
}
.container-body h1 {
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-size: 3rem;
color: #c8984c;
}
.container-body p {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
color: white;
}
<body>
<header class="container">
<h1 class="logo">SMAR<span class="t">T</span>IK</h1>
<nav class="navigation">
<ul class="ul-navigation">
<li><a href="#">C</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<button class="contact-button"><a href="#">Contact</a></button>
</header>
<div class="container-body">
<h1>Ut neque qui ut<br />deleniti et.</h1>
<p> Molestiae a nobis molestiae mollitia eos dolor qui.<br /> Delectus voluptate vel alias iusto autem quos ipsam eligendi. </p>
</div>
</body>
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it
to center an element you need a specific height not a calculated height. The height needs to taller then the content. Also
