I’m having trouble with putting my header’s text in the center, as I put display:block.
I am new to coding, and I saw that for a better finish it was wise to have an “inner-header”; So I did, but as the inner-header is a block, I cannot text-align: center nor align-items:center
Could someone help me?
I honestly tried everything I could think of, changing the display:block to flex, then adding right:…px, but nothing seems to correctly center the text.
should I get rid of the inner-header?
thanks in advance
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body{
background-color: #101010;
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.header{
width: 100%;
height: 300px;
background-color: #101010;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.inner_header{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: red;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
margin-top: 60px;
}
.logo_container{
height: 100%;
display: table;
float: right;
position:relative;
right: 40%;
}
.logo_container h1{
color: bisque;
font-family: "Whisper", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
align-items: center;
font-size: 50px;
}
.logo_container p{
max-width: 500px;
margin: 5px auto;
line-height: 18px;
font-size: 12px;
color: bisque;
}
.logo_container img{
width: 119px;
height: 111px;
object-fit: fill;
}<header>
<div class="header">
<div class="inner_header">
<div class="logo_container">
<h1 style="text-align: center;">Céramique & Lumière</h1>
<p>UNIQUE CREATION PRODUCT</p>
<p>HANDMADE</p>
<img src="../photos/240610_ logo_1.png" alt>
</div>
</div>
</div>
</header>
New contributor
mosaiic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.