Centering an image

Freeway
1

Hi everyone,

I am building a Lightbox gallery with thumbnails.
I would like my images to be centered vertically AND horizontally as well.
I succed in centering the pictures vertically but not horizontally.

Could someone help to achieve this ?

http://www.adobati.fr/test/statuaire.php

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Hello, nobody knows ???

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

On 19 Apr 2018, at 16:44, alain email@hidden wrote:

Hello, nobody knows ???

Can you centre the box that the gallery is in?

Inflow HTML boxes can be centred horizontally using auto margins (Align:Center in the Measurements section of the Inspector palette).

Jeremy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

… although, from at your web page, it looks like you have the images centred horizontally but not vertically.

Jeremy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Thanks jeremy,

yes, that’s the problem.
I want the content of my box to be centered in the middle, both horizontally and vertically.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Hi Alain,

If you know the size of the box and the size of the content, you could use padding to centre the content.

E.g.

  1. Create a box that is 200px square
  2. Insert a graphic that is 108px high (as an inflow item)
  3. Set the box padding to be 46px top and 46px bottom: 46 = (200 - 108) / 2

Jeremy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

Jeremy,

there is a CMS installed on this page (Webyep).
It means a vertical OR an horizontal image can be added to the box as a thumbnail without knowing in advance.

What i would like to do is that any content would be centered in the middle of the box (horizontal and vertical).

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

Maybe Max has some ideas?

Otherwise, here’s a trick that I found and adapted:

  1. Make the graphic into a layer child of the box
  2. Set the top and left positions of the graphic to be 50%
  3. Select the graphic and choose Extended from the Item menu
  4. New div style
  5. Set name to “transform” and value to “(translate: -50%, -50%)”

It will look wrong in Freeway, but should be correct on output.

Jeremy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

Another trick you can use is to make your images square, and pad them with transparent or white pixels on the “short” sides.

Walter

On Apr 19, 2018, at 1:15 PM, Jeremy Hughes email@hidden wrote:

Maybe Max has some ideas?

Otherwise, here’s a trick that I found and adapted:

  1. Make the graphic into a layer child of the box
  2. Set the top and left positions of the graphic to be 50%
  3. Select the graphic and choose Extended from the Item menu
  4. New div style
  5. Set name to “transform” and value to “(translate: -50%, -50%)”

It will look wrong in Freeway, but should be correct on output.

Jeremy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

Hi guys,

thanks to both of you for helping.
Walt, this is a CMS.
I built this site for a customer who is not used to Photoshop.
He doesn’t know how to prepare his images for the web.
The purpose is that whatever the image is, it is automatically centered in the middle of the box.

I hope Max has a solution.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

11

What about Flexbox? Works great for centering.

I use it to center videos of unknown dimensions.

Todd
QREATiv Project

freewaytalk mailing list
email@hidden
Update your subscriptions at:

12

Hi Todd,

yes this is what Max tells me to do and yes it works perfectly.

Thank you

freewaytalk mailing list
email@hidden
Update your subscriptions at: