CODEWITHSUNDEEP
htmlcss
Willem van der Veen
Willem van der Veen

Reputation: 36580

CSS formatting a linebreak

When I have the following code:

.kitty {
    height: 20vw;
    width: 20vw;
}
    <div class="container-fluid">
      <div class="row">
        <div class="content col-lg-12">
          <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png"         alt="foo" class="kitty">
              textextext <br> textextext
          <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png"  alt="foo" class="kitty"> 
        </div>
      </div>
    </div>

What I want is that the text is that the <br> element applies to the text but that the images are still in one line. like this:

enter image description here

Which HTML or CSS do I have to use in order to achieve this?

Upvotes: 0

Views: 73

Answers (3)

Temani Afif
Temani Afif

Reputation: 272638

You can simply use flex and you don't have to change your markup:

.kitty {
  height: 20vw;
  width: 20vw;
}
.content {
  display:flex;
  /* For vertical & horizontal alignment */
  justify-content:space-around;
  align-items:center;
  /* */
}
<div class="container-fluid">
  <div class="row">
    <div class="content col-lg-12">
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty"> textextext <br> textextext
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty">
    </div>
  </div>
</div>

And it seems you are using Bootstrap, so if it's the V4, you will find ready classes for the CSS I added as this version rely on flex too.

.kitty {
  height: 20vw;
  width: 20vw;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="content col d-flex justify-content-around align-items-center">
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty"> textextext <br> textextext
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty">
    </div>
  </div>
</div>

Upvotes: 3

Racil Hilan
Racil Hilan

Reputation: 25341

Then you need to put all the text in one span element and display it as inline-block like this:

.kitty {
  height: 20vw;
  width: 20vw;
}

.content span {
  display: inline-block;
}
<div class="container-fluid">
  <div class="row">
    <div class="content col-lg-12">
      <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png" alt="foo" class="kitty">
      <span>textextext <br> textextext</span>
      <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png" alt="foo" class="kitty">
    </div>
  </div>
</div>

Note: I used the .content span selector, but you may have to use a different selector (perhaps give a class to the span) if you have other .content elements with span children on the same page and don't want them to behave the same.

Upvotes: 3

Gene Parcellano
Gene Parcellano

Reputation: 6044

There were some unnecessary elements. I removed those and made your markup simpler.

.kitty {
    height: 20vw;
    width: 20vw;
}
.kitty-text {
    display: inline-block;
}
    <div>
          <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png"         alt="foo" class="kitty">
              <span class="kitty-text">textextext <br> textextext</span>
          <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png"  alt="foo" class="kitty"> 
    </div>

Upvotes: 3

Related Questions