Vertical centered photos - Post ID...

User 2664457 Photo


Registered User
14 posts

Is it possible to vertically center photos?
By that I mean to draw an imaginary line horizontally thru the center of a photo, declare a fixed maximum height ( in a column, container or whatever is required) and have the photo expand by bleeding both the top and bottom equally.
...paul
User 2699991 Photo


Registered User
2,327 posts
Online Now

Paul Peters wrote:
Is it possible to vertically center photos?
By that I mean to draw an imaginary line horizontally thru the center of a photo, declare a fixed maximum height ( in a column, container or whatever is required) and have the photo expand by bleeding both the top and bottom equally.
...paul

not sure I fully understand the bleeding thing but
place your image in a column/container Which you can set the height or padding etc as you desire whatever, set whatever size you want to set the image to

In the column/container go to the position section in design view,
set the display to = flex
direction = column
wrap = nowrap
justify = either flex start (if you want the image to align to the top of the container) or center (if you want the image to center horizontally in the column/container)
items=center to align the image vertically

Alternative
keep the column/container set to block (whatever width you desire and set the margins for the image left & right to auto
The Help You Need: When You Need It The Most
User 2664457 Photo


Registered User
14 posts

If the photo is smaller vertically than the column/container height, the instructions work for centering the photo vertically in the box. A larger photo still stays pinned to the top and doesn't get cropped.
However, what I'm after is for the photo to be larger than the container height (which is static ie. 200 px) and as the viewport gets wider and the photo grows in size, the photo stays centered vertically, clipping equal parts off the top and off the bottom. Example; a sunset would keep the sun/horizon vertically in the center while the sky and foreground would be equally cut off more and more as the photo gets bigger ...
User 2699991 Photo


Registered User
2,327 posts
Online Now

Paul Peters wrote:
If the photo is smaller vertically than the column/container height, the instructions work for centering the photo vertically in the box. A larger photo still stays pinned to the top and doesn't get cropped.
However, what I'm after is for the photo to be larger than the container height (which is static ie. 200 px) and as the viewport gets wider and the photo grows in size, the photo stays centered vertically, clipping equal parts off the top and off the bottom. Example; a sunset would keep the sun/horizon vertically in the center while the sky and foreground would be equally cut off more and more as the photo gets bigger ...


put it as a background image in the column container (size =contained/custom whatever works
The Help You Need: When You Need It The Most
User 2664457 Photo


Registered User
14 posts

Yes ... add it all together - it works (size=cover); container can be height adjusted as necessary at breakpoints ... THX much :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.