Centering an image

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:
https://freewaytalk.softpress.com/person/options

Hello, nobody knows ???


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

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

… 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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options


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

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options