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:

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

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] — Temani Afif
– Temani Afif, Commented Jan 8, 2018 at 19:44

Gene Parcellano · Accepted Answer · 2018-01-08 19:31:55Z

3

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>

answered Jan 8, 2018 at 19:31

Gene Parcellano

6,0545 gold badges40 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Temani Afif Over a year ago

not sure the element are unnecessary :) he's cleary using bootstrap and the code seems a part of big code

Gene Parcellano Over a year ago

@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 Over a year ago

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 Over a year ago

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 Over a year ago

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

Racil Hilan · Accepted Answer · 2018-01-08 19:38:14Z

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.

Temani Afif · Accepted Answer · 2018-01-08 19:40:04Z

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>

Collectives™ on Stack Overflow

CSS formatting a linebreak

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related