Center align image and text inside columns
-
Hello
I am making a therapist website and am creating a 3 column treatments block layout using column blocks each with an image, header and paragraph-seen here: https://practice2356.wordpress.com
I made the images smaller and now they don’t span the full width of each column.
For this reason all images are now smaller than the columns and are left aligned. I then made the 3 columns themselves
more narrow but now all the three columns are no longer center aligned.I am wondering how I would center the image within the column, and then how would I center
3 three columns themselves?I only have a free website at the moment so no access to the css. Can this be achieved with just the site editor?
I am a wordpress.com newbie.
Hope my question makes sense:)WP.com: Yes
Jetpack: No
Correct account: YesThe blog I need help with is: (visible only to logged in users)
-
Hey there,
To achieve that, have you consider adding a pattern instead and then replace the texts/images with yours? From my experience, adding patterns is the fastest way to build a page, and it is freely accessible via the Site Editor. :)
From your page, I see that you use Appleton theme, there are 3 column layout pattens that might suit your need.
To add a pattern, go to Site Editor > click + > search for “three..” and it will you show a list of patterns with that names. From there you can choose any pattern that suits your need. For your particular issue, I suggest “three columns with heading, text, and image”.
I hope my suggestion help you. Good luck!
-
Hello
Thank you for your suggestion. The “three columns with heading, text, and image” works a treat-always forget to use the patterns:) However, it is still tricky to center align the images in the column horizontally once they are made smaller. Center aligning within a column does seem to be an issue. I will see if modifying the html makes any difference.
King Regards
-
I’m curious. 🤔 Is this what are you trying to achieve? It’s all do-able via the Site Editor.
Home Appleton
-
Hello
That is exactly the column layout I am trying to achieve:)
So the image is more narrow than the column but it is centered.I tried to center align the image in the editor but this didn’t work.
Also edited the html and displayed the image as a block and used justify-content:center and text-align:center but this produced block errors.
How was this centered layout within a column achieved? -
Hi,
Actually, it’s pretty easy to achieve. I only did a few of customizations on the pattern, like coloring the background, centering the heading text, and rounded + resizing the image to 75% lower. So the pattern basically took care of the image centering automatically.
Here’s the html code of the column block:
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw","right":"var:preset|spacing|60","left":"var:preset|spacing|60"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"0"}},"backgroundColor":"tertiary","layout":{"inherit":true,"type":"constrained"},"anchor":"3columns"} --> <div class="wp-block-group alignfull has-tertiary-background-color has-background" id="3columns" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-right:var(--wp--preset--spacing--60);padding-bottom:7vw;padding-left:var(--wp--preset--spacing--60)"><!-- wp:columns {"align":"wide"} --> <div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.34%","style":{"spacing":{"blockGap":"16px"}}} --> <div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:heading {"textAlign":"center","level":4} --> <h4 class="wp-block-heading has-text-align-center">Work Smart</h4> <!-- /wp:heading --> <!-- wp:image {"id":534,"width":169,"height":169,"sizeSlug":"large","linkDestination":"custom","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://otaktik.files.wordpress.com/2023/04/treatments2-1.webp?w=225" alt="" class="wp-image-534" width="169" height="169"/></figure> <!-- /wp:image --> <!-- wp:paragraph {"fontSize":"small"} --> <p class="has-small-font-size">Success is earned, one step at a time. One of the most invaluable skills a person can have is being able to clearly express what they want.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"width":"33.34%","style":{"spacing":{"blockGap":"16px"}}} --> <div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:heading {"textAlign":"center","level":4} --> <h4 class="wp-block-heading has-text-align-center">Work Hard</h4> <!-- /wp:heading --> <!-- wp:image {"id":534,"width":169,"height":169,"sizeSlug":"large","linkDestination":"custom","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://otaktik.files.wordpress.com/2023/04/treatments2-1.webp?w=225" alt="" class="wp-image-534" width="169" height="169"/></figure> <!-- /wp:image --> <!-- wp:paragraph {"fontSize":"small"} --> <p class="has-small-font-size">Sometimes the hardest part of finding success is gathering the courage to get started. As long as you’re learning, you’ll never really fail.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"width":"33.33%","style":{"spacing":{"blockGap":"16px"}}} --> <div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"textAlign":"center","level":4} --> <h4 class="wp-block-heading has-text-align-center">Sweet Success</h4> <!-- /wp:heading --> <!-- wp:image {"id":534,"width":169,"height":169,"sizeSlug":"large","linkDestination":"custom","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://otaktik.files.wordpress.com/2023/04/treatments2-1.webp?w=225" alt="" class="wp-image-534" width="169" height="169"/></figure> <!-- /wp:image --> <!-- wp:paragraph {"fontSize":"small"} --> <p class="has-small-font-size">The most successful people don’t look back to see who’s watching. Look for opportunities to lift others up along the way.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group --> -
Hey:)
Thank you for the code! I am working with the Appleton theme. So the process of centering the image within a block would be to make the image resolution 75% and rounding the image itself, then centering the heading? Do I need to add anything to the html of the image itself?
Thanks
-
So the process of centering the image within a block would be to make the image resolution 75% and rounding the image itself, then centering the heading?
Hi, my apologies. Perhaps I wasn’t clear enough. :) Those aren’t the steps to make the image centering, the image will got centered despite of those steps. It just the automatic image-centering will be prominent if you rounded and lowered the resolution of the image, as this is your desired layout, right?
Please try to play around with column patterns, or the column block to get familiarized yourself with their behavior. The Site Editor provides powerful blocks to build almost any site we want.
These wonderful resources will allow you to get started and learn more about column block or site building in general.
- https://wordpress.com/support/wordpress-editor/blocks/columns-block/
- https://wordpress.com/support/wordpress-editor/blocks/group-block/
- https://wordpress.com/learn/courses/create-your-site/
I hope this helps. Good luck with your site project! :)
-
Hello:)
Thank you for the links! Very useful info about columns. Found that a combination of padding and block spacing was effective in centering the smaller images. I will also upgrade to get more access and control of the code.
Best Regards
- The topic ‘Center align image and text inside columns’ is closed to new replies.
WordPress.com Forums 