Hi,
I am configuring a grid section of 6 photos and text heading under the photos.
I need to put the text in the center of the image.
There are 2 options that I know.
To use the padding on the div’s content.
To put a relative position on the content div and to move it to the center.
Is there a better way to center the text automatically?
Which display is also better to put the wrapper on?
When I use the flex and grid display on the wrapper it only centers
the text under the photo in the middle of the div.
I discovered that it works when I put the content div on display flex, direction column, vertical center, and horizontal center.
Hey @Stolichnaya I’m glad to see that you like to experiment with builder. When comes to text alignment there is one handy option for that, in the typography panel you can find align options for text:
And one advice, if you want to center multiple text elements like I did here (I have my heading and paragraph centered) you just need to set this alignment option to the parent of your text tags, that way you will set all of your text tags inside of your parent to be centered, just like I did in this example:
Thanks for your reply brother!!!
I am starting to get it 
So it is always better to use text-align for text instead of the other options: display flex, direction, horizontal, padding, and position options. right?
Your tip for aligning parent and child is amazing!
When comes to text alignment its best to use Align options into the topography panel, flex shall be used in some other cases.
Why the align option doesn’t work on my parent content?
I put it on my div: content and it doesn’t work.
If your text tags (H3 and paragraph) have align option set to them this method with parent wont work.
Dear brother
One more question, please.
What is the best method to make the width of the text lines smaller?
In this case, I need to reduce the width lines of the paragraphs,
Is padding the best option for it?
If this centering method doesnt work just set those align options directly to the text tags. And for the width of the text, best option is to set maximum width to your text tag, you can find that option here:
In this case you can set max-width: 200px or something on your paragraph.
If text was centered, alternative would be to set padding on sides, like 20px padding both sides. And if text was centered, you can also use max width, but in that case you would need to center margins. You can center margins if you click icon below:
Wow, I could never think about centering the margins.
Why do I need to center the margins to automatic after using the max width with centered align?
I’m not sure I understand the center margin option.
why the margin 0px is different from that centered margin?
This topic is very important to understand the basics.
I really appreciate your help.
When you set an element’s margin to auto, it basically tells the browser to automatically distribute the available space evenly on both sides (left and right) of the element. This results in the element being centered.
