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

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?

HTML:

        <div >
          <div >
            <div >
              <img  src="picture.png" alt="...">
              <div ><h4>Web server monitoring and maintenance.</h4>
              <div>Monitoring and upgrades.</div></div>
            </div>
          </div>
       </div>

CSS:

.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%;
}

Of course I want this to be naturally centred, not artificially.

CodePudding user response：

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 >
  <div >
    <div >
      <img  src="https://picsum.photos/50" alt="...">
      <div >
        <h4>Web server monitoring and maintenance.</h4>
        <div>Monitoring and upgrades.</div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <img  src="picture.png" alt="...">
      <div >
        <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.

CodePudding user response：

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 >
  <div >
    <div >
      <img src="https://placekitten.com/640/360" alt="...">
    </div>
    <div >
    <div >
      <h4>Web server monitoring and maintenance.</h4>
      <p>Monitoring and upgrades.</p>
      </div>
    </div>
  </div>
</div>

TL;DR. Make your .name also a flex container.

TL;DR. Make your `.name` also a `flex` container.