# Centering an image

**URL:** <https://discourse.softpress.com/t/centering-an-image/24122>\
**Category:** Freeway\
**Created:** [April 19, 2018, 10:15am UTC](https://discourse.softpress.com/t/centering-an-image/24122 "2018-04-19T10:15:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![alain](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@alain](https://discourse.softpress.com/u/alain)\
**Post date:** [April 19, 2018, 10:15am UTC](https://discourse.softpress.com/t/centering-an-image/24122/1 "2018-04-19T10:15:46Z")

</div>

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](http://www.adobati.fr/test/statuaire.php)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![alain](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@alain](https://discourse.softpress.com/u/alain)\
**Post date:** [April 19, 2018, 3:44pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/2 "2018-04-19T15:44:29Z")

</div>

Hello, nobody knows ???

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Jeremy](https://discourse.softpress.com/user_avatar/discourse.softpress.com/jeremy/32/2740_2.png) [@Jeremy](https://discourse.softpress.com/u/Jeremy)\
**Post date:** [April 19, 2018, 3:52pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/3 "2018-04-19T15:52:19Z")

</div>

> On 19 Apr 2018, at 16:44, alain [email@hidden](mailto: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](https://freewaytalk.softpress.com/person/options)

---

<div class="post-metadata">

**Author:** ![Jeremy](https://discourse.softpress.com/user_avatar/discourse.softpress.com/jeremy/32/2740_2.png) [@Jeremy](https://discourse.softpress.com/u/Jeremy)\
**Post date:** [April 19, 2018, 3:56pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/4 "2018-04-19T15:56:15Z")

</div>

… 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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![alain](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@alain](https://discourse.softpress.com/u/alain)\
**Post date:** [April 19, 2018, 3:59pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/5 "2018-04-19T15:59:09Z")

</div>

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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Jeremy](https://discourse.softpress.com/user_avatar/discourse.softpress.com/jeremy/32/2740_2.png) [@Jeremy](https://discourse.softpress.com/u/Jeremy)\
**Post date:** [April 19, 2018, 4:06pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/6 "2018-04-19T16:06:31Z")

</div>

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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![alain](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@alain](https://discourse.softpress.com/u/alain)\
**Post date:** [April 19, 2018, 4:25pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/7 "2018-04-19T16:25:50Z")

</div>

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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Jeremy](https://discourse.softpress.com/user_avatar/discourse.softpress.com/jeremy/32/2740_2.png) [@Jeremy](https://discourse.softpress.com/u/Jeremy)\
**Post date:** [April 19, 2018, 5:15pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/8 "2018-04-19T17:15:51Z")

</div>

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](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [April 19, 2018, 9:53pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/9 "2018-04-19T21:53:59Z")

</div>

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

* * *

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

---

<div class="post-metadata">

**Author:** ![alain](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@alain](https://discourse.softpress.com/u/alain)\
**Post date:** [April 20, 2018, 8:02am UTC](https://discourse.softpress.com/t/centering-an-image/24122/10 "2018-04-20T08:02:26Z")

</div>

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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Todd2](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/bbe5ce/32.png) [@Todd2](https://discourse.softpress.com/u/Todd2)\
**Post date:** [April 20, 2018, 4:36pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/11 "2018-04-20T16:36:43Z")

</div>

What about Flexbox? Works great for centering.

I use it to center videos of unknown dimensions.

Todd  
[QREATiv](https://qreativ.space) Project

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![alain](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@alain](https://discourse.softpress.com/u/alain)\
**Post date:** [April 20, 2018, 5:14pm UTC](https://discourse.softpress.com/t/centering-an-image/24122/12 "2018-04-20T17:14:21Z")

</div>

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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...