Hello all,
Starting new with Pinegrow and some experience with web design. Though, when using a teamblock i’m unable to center the image on the page (Tailwind). Tried several options and tested on different locations applying the css styles for centering items though all failed.
Can someone take a brief look and let me know what i’m doing wrong?
Hi @m.meuwese,
Add classes of flex and justify-center to the div wrapping your image. That should do the trick.
Cheers,
Bob
Thx, that worked. I will have a look what that ‘flex’ means. it worked as you described.
Hi @m.meuwese,
The justify classes are used within flex to orient items along the horizontal axis.
Cheers,
Bob
You can center a picture by enclosing the tag in the < center ></ center > tags. This action centers that, and only that, picture on the web.
Hi @Louder26,
The <center> tag has been deprecated in HTML5. It is unclear if this will be supported in browsers going forward.
Cheers,
Bob
Assuming bootstrap 5, add class to image - class=“d-block mx-auto”
Guys please don’t forget good old text-align: center, for inline elements and texts this is the first thing we should use. So that you don’t have to use two styles, one for texts and another for image (or inline elements)
But in above case, TailwindCSS is used and Tailwind by default applies display: block to images. So you can just use class inline on that image, if parent element has class text-center. If not you can also apply class mx-auto, best incase you only have to center the image.
Good thing about text-align is that it is applied through descendent, so when you change alignment of the parent element it will be applied to the child elements as well. And you don’t have to specifically apply to a particular element. Even for responsive, you’ll have less work to do.