I'm struggling to align my logo in the center of my header. I want it to appear like this when displayed correctly: "Name" Logo "Surname". The logo should be centered, with the "name" on its left and the "surname" on its right. (Please refer to the image I've attached for better understanding)
I need the circled logo to be at the center of the header, with "Pousada" on its right and "Team" on its left.
This is the CSS and HTML I currently have:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li><a href="Arte Soave.html">Arte soave</a></li>
<li><a href="El Equipo.html">El Equipo</a></li>
<li><a href="La Escuela.html">La Escuela</a></li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>Despite trying to use float, I couldn't achieve the alignment I wanted. I attempted using inline-block to align the three elements - "Pousada", "logo," and "Team" in the header.
If you can provide assistance with this specific issue or recommend any resources or project exercises to help me grasp HTML and CSS concepts such as layouts and positioning, I would greatly appreciate it. Rest assured, I am willing to reciprocate any help that I can offer.
Thank you in advance, and please don't hesitate to let me know if there's anything I can do to improve this platform.
Warm regards, Miguel