Locating picture to the left, but the text centered - html

Question

I want to have my the picture.png to be exactly on the very left of the title "ribbon", and the text to be centred about the ribbon (regardless of the presence of the picture). I've been struggling with CSS and flex boxes for a lot of time trying to achieve just this effect. Here I'm using some bootstrap classes, but .heading is my class.
That being said, is it actually possible to do all this alignment without using flexbox, but something more natural and simple? Such as maybe something from CSS1, without all those flex boxes?
.heading {
background-color: rgba(15, 156, 199, 0.829);
height: 5%;
display: flex;
text-align: center;
justify-content: space-between;
/* not helpful of course */
}
/* Here's what I'm trying to achieve. I made this by artificially adding the following CSS code: */
.name {
margin-right: 31%;
}
<div class="container-sm">
<div class="card-body">
<div class="heading">
<img class="rounded img-fluid" src="picture.png" alt="...">
<div class="name">
<h4>Web server monitoring and maintenance.</h4>
<div>Monitoring and upgrades.</div>
</div>
</div>
</div>
</div>
Of course I want this to be naturally centred, not artificially.

Answer 1

TL;DR. Make your .name also a flex container.
Please see the code snippet below. I didn't edit the HTML except the placeholder image. The main CSS change is in .name class to make it flex container and have its content vertically centered. Also, its parent .heading styles are a little adjusted to make it work properly.
.heading {
background-color: rgba(15, 156, 199, 0.829);
height: 5%;
display: flex;
text-align: center;
}
img {
width: 50px;
height: 50px;
flex: 0;
}
.name {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h4, div {
margin: 0;
padding: 0;
line-height: 1;
}
<div class="container-sm">
<div class="card-body">
<div class="heading">
<img class="rounded img-fluid" src="https://picsum.photos/50" alt="...">
<div class="name">
<h4>Web server monitoring and maintenance.</h4>
<div>Monitoring and upgrades.</div>
</div>
</div>
</div>
</div>

Answer 2

Bootstrap relies on Flexbox for the alignment and layouts. So it will be odd to avoid using it.
Here is a code snippet that will help you achieve what you want to do.
Helpful links:
Bootstrap Flexbox: Flexbox utility classes
CSS Flexbox: MDN flexbox docs
.heading {
background-color: rgba(15, 156, 199, 0.829);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-sm">
<div class="card-body">
<div class="heading d-flex text-center">
<img class="rounded img-fluid" src="picture.png" alt="...">
<div class="name flex-grow-1">
<h4>Web server monitoring and maintenance.</h4>
<p>Monitoring and upgrades.</p>
</div>
</div>
</div>
</div>
Note: Bootstrap is all about pre-made components and utility classes so try to avoid writing custom CSS as much as possible. Another downside of this is that you're repeating yourself and making Bootstrap useless in the manner you're using it.

Answer 3

using flexbox
img,.image {
height:50px;
}
.box {
display: flex;
align-items: center;
width: 100%;
text-align: center;
height:50px;
}
.text-wrapper{
background-color: rgba(15, 156, 199, 0.829);
width:100%;
height:50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.container{
padding:5px;
}
*{
margin:0px;
padding:0px;
}
<div class="container">
<div class="box">
<div class="image">
<img src="https://placekitten.com/640/360" alt="...">
</div>
<div class="text-wrapper">
<div class="text">
<h4>Web server monitoring and maintenance.</h4>
<p>Monitoring and upgrades.</p>
</div>
</div>
</div>
</div>