0

Is there a CSS code that can help me evenly distribute text across several rows?

For example, in this image: https://i.stack.imgur.com/cDxj5.jpg

In the image on the left, the text is occupying more space in terms of width than necessary.

The image on the right looks better as it spreads text more or less evenly across two rows. This is what I am trying to achieve.

Right now the solution is to adjust the number of pixels on the left and right margins so as to get the text to evenly spread across the two rows. I do this in Wordpress.

However, as I have many images on the page, I was wondering if there is some CSS code that can automatically achieve this for me.

Thank you.

Anrie Burie
  • 19
  • 2
  • You could use a grid system like [Bootstrap](https://getbootstrap.com) uses. – Jack Moody Mar 30 '19 at 17:52
  • @JackMoody Hi Jack, thanks for the reply. May I know if there is a CSS solution available for this? The reason is that I am not good with coding so rely heavily on beginner-friendly stuff like WordPress and its plugins. Thanks. – Anrie Burie Mar 30 '19 at 18:06
  • You might find the answer to [this question](https://stackoverflow.com/questions/26192088/how-to-distribute-elements-evenly-inside-a-div) helpful. – Jack Moody Mar 30 '19 at 20:19

1 Answers1

0

You could add a css class to your text and give it a max-width, like this:

.text-block {
  max-width: 120px;
  margin: auto;
  text-align: center;
}
<p class="text-block">Some dummy text and some more dummy text.</p>

In this case, margin: auto is used to center the text inside parent container.

TVBZ
  • 564
  • 1
  • 4
  • 15