CSS formatting a linebreak

Question

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?

• Temani Afif: if you are using the last version of boostrap i advice you to check my answer as you can simply rely on flex and use predefined classes ;) [am not looking for upvotes or accepted answer but simply for you to get more ways that are suitable for your situation]

Answer 1

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>

• Temani Afif: not sure the element are unnecessary :) he's cleary using bootstrap and the code seems a part of big code
• Gene Parcellano: @TemaniAfif If you can accomplish the layout with the least amount of mark up and elements, go for the simpler setup. I didn't see any reason to add .row and .col-. The simpler setup will accomplish the same fluid layout.
• Temani Afif: you didn't get me :) he's using bootstrap, the use of row/col is logic and here you don't see the necessity of it but it's necessary if it's a part of a big code ... i agree that here we don't need it, by the way the span you added is also useless and the div too ;) we can do without ... But saying it's not necessary can lead to confusion and the OP may think he's doing wrong.
• Gene Parcellano: So neither of us is right or wrong since we do not know the full context. But based on the context that the OP exhibits in the example, I stand by my opinion that it's unnecessary. And regarding the span, how would you go about accomplishing the layout goals without another element wrapping the text in the middle?
• Temani Afif: you can check my answer to see that i didn't add any wrapper, but only CSS by using flex ... and that's why i was talking about bootstrap because even if we don't know the full context, since we know he's using bootstrap means that we can use some classes provided by bootstrap like i also did in my answer. As for me it's good to rely on existing classes provided by the framework we are using and only add extra HTML/CSS when needed

Answer 2

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.

Answer 3

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>