Set background image using css

Question

Here i upload the picture, i want to put my image to the left side of Food and Travel text

 .block-title h3 { color: #151515; font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: -0.9px; margin-bottom: 24px; margin-top: 50px; padding-bottom: 13px; position: relative; text-align: center; } 

 <div class="col-lg-12"> <p> <center><img src="#"> <div class="block-title"> <h3>Food & Travel</h3> </div> </center> </p> </div> 

Answer 1

You just need to add that line of CSS

 div.block-title { display: inline-block; } 

 <div class="col-lg-12"> <p> <center><img src="#"> <div class="block-title"> <h3>Food & Travel</h3> </div> </center> </p> </div> 

Answer 2

I would change your HTML a little bit:

<div class="col-lg-12">
    <div class="block-title">
        <img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
        <h3 class="title">Food & Travel</h3>
    </div>
</div>

Some observations about your HTML:

• Since the creation of CSS, it is considered a bad practice to use styling elements inside HTML, like center . HTML should hold only content and CSS styles. center in HTML can be, in most cases, easily replaced by text-align: center in CSS;
• Avoid giving styles to a tag (as you did with H3). It is always better to give a class for each individual element you want to style. For example, you can give a class to your image and to your header, as I did on the example above.

Float , as mentioned by some users here, is barely a good option. I would not recommend it. I'd go for using Flexbox on the container ( block-title ). It is the better option and the most accurate.

Your container would be something like

.block-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

... and the magic is done!

Here is an example using flexbox : https://codepen.io/annabranco/pen/mzEXGv

Another option if you are not comfortable with using Flebox yet, it's to give the H3 a display: inline . By default, all header force a line break (they have display: block). If you change it to display: inline you force the other elements to be displayed in the same line as your header. In this case you would need to play around with vertical-align to find the exact spot where your text would be centered to the image.

.title {
    display: inline;
(..)
}

.image {
  vertical-align: -25px; //negative values go up and positive down.
}

Here is an another example, using inline : https://codepen.io/annabranco/pen/yRJvQa