# How do I align my object center and keep the width responsive?

**URL:** <https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599>\
**Category:** Panel\
**Created:** [May 2, 2020, 7:35am UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599 "2020-05-02T07:35:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 2, 2020, 7:35am UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/1 "2020-05-02T07:35:28Z")

</div>

#### My Pain

I’m trying to develop v2 of [awesome-panel.org](http://awesome-panel.org) and I would like my _main_ item to

1, center  
2. expand to a max width of 1140px.

I’ve tried all that I can think of

- css in the template (Does not work well with bokeh layout engine)
- different kinds of Panel layouts and spacers

but I cannot get it working.

**I hope someone can help.**

#### Additional Context

I will provide more context in by posting some examples of what does not work below.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 2, 2020, 7:39am UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/2 "2020-05-02T07:39:27Z")

</div>

This is an example where my main object is a Column.

I set the `width=1140px` and `sizing_mode="stretch_height" and place it inside a row with a `Spacer `on both side `pn.Row(pn.Spacer(), main, pn.Spacer())`

It works when the window size is larger than 1140px but not for smaller screens as the main column keeps it width of 1140px.

 ![fixed_width](https://discourse.holoviz.org/uploads/default/original/1X/7bd047214e9efaf620f786c9879b3e4ca2e7872f.gif)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 2, 2020, 8:14am UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/3 "2020-05-02T08:14:01Z")

</div>

I managed to get something working. It took some time and I needed a trick with a `Spacer` to get it working. So I want to share it here.

 ![fixed_width](https://discourse.holoviz.org/uploads/default/original/1X/d35f1d9e389b20dd9342187d4d72fbbdd0a5c22a.gif)

```python
import panel as pn
pn.config.sizing_mode="stretch_width"

MAX_WIDTH=1140

spacer = pn.Spacer(height=10, background="blue", margin=0)
main_content = pn.Column(
    "Example 3 "*100, 
    sizing_mode="stretch_width", 
    max_width=MAX_WIDTH, 
    background="green", 
    align="center" # WHY I SHOULD set align="center" here and not on main_area confused me
)
main_area = pn.Column(
    spacer, # TRICK: WONT WORK WITHOUT. YOU CAN SET HEIGHT TO 0 TO NOT TAKE UP HEIGHT
    main_content,
    sizing_mode="stretch_both",
    background="lightgray",
)

main_area.servable()

```

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 2, 2020, 8:57am UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/4 "2020-05-02T08:57:01Z")

</div>

And here is how to original looks with the solution.

 ![max_width_responsive_works](https://discourse.holoviz.org/uploads/default/original/1X/69574ec17b5f6b43f3de5655e54d3cdefd6b88c8.gif)

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [May 2, 2020, 6:23pm UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/5 "2020-05-02T18:23:42Z")

</div>

Thanks for sharing! I’m wondering if panel can have a built-in version of this, like `pn.CenteredColumn` or something.

Align always confused me as well.

---

<div class="post-metadata">

**Author:** ![zgana](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/zgana/32/5675_2.png) [@zgana](https://discourse.holoviz.org/u/zgana)\
**Post date:** [September 29, 2025, 7:21pm UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/6 "2025-09-29T19:21:14Z")

</div>

I found this thread via Google, but the above solution does not appear to be working anymore. There is now an easier option with FlexBox, although I couldn’t find this specific pattern clearly documented. Here is an updated example:

```py
import panel as pn

pn.extension(sizing_mode="stretch_width")

MAX_WIDTH = 800

main_content = pn.Column(
    "example " * 100,
    margin=(10, 50),
    max_width=MAX_WIDTH,
    styles={'background': 'lightgreen'},
)
main_area = pn.FlexBox(
    main_content,
    justify_content="center",
    styles={'background': 'lightgrey'},
)

main_area.servable()

```

This was tested with the following versions:

```auto
bokeh==3.8.0
panel==1.8.1

```

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [September 29, 2025, 9:08pm UTC](https://discourse.holoviz.org/t/how-do-i-align-my-object-center-and-keep-the-width-responsive/599/7 "2025-09-29T21:08:26Z")

</div>

Amazing!