I've been attempting to achieve a pretty basic task, but unfortunately my efforts have fallen short thus far. I have an image and a title that need to be centered within their parent div element. However, I'm struggling to find the proper way to align them both when centering the logo and text.
Html:
<div class="content">
<div class="header">
<img src="path/to/image">
<span>Hey this is my title</span>
</div>
</div>
CSS:
.header{
text-align: center;
width: 100%;
height: 40px;
}
.header img{
height: 40px;
width: auto;
display: inline-block;
}
.header span{
display: inline-block;
}
In the provided code, the logo has fixed dimensions while the text can vary in height. The styling produced by the code looks like the example below:
Could someone advise me on how to accomplish this? Essentially, I want multiple divs aligned centrally next to each other.