How can I center a picture?

[Bruce_Yin]

How can I center a picture?

This is the picture I normally displayed

But when I click the expand button, it will always be displayed on the left, rather than in the center of the screen. How can I center the image when I expand it?

[Caroline]

Hi there,

Thanks for sharing your question with the community! Please review our guidelines on how to post an effective question here – it looks like your post is missing a code snippet.

Caroline

[edsaac]

I think the original question is about showing images centered while in fullscreen mode. For instance, the normal behavior is that:

import streamlit as st

"# Center an image when in fullscreen"
"Images (and most elements in general) are always aligned to the left"
st.image("https://placekitten.com/g/200/200")

But (if I understood the question correctly) this is the desired behavior:

---

I wonder if there is a better solution than the css selector I used here. It just targets images when a button whose title starts with “Exit” (as in “Exit Fullscreen”) is found before.

import streamlit as st

st.markdown(
    """
    <style>
        button[title^=Exit]+div [data-testid=stImage]{
            text-align: center;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
    </style>
    """, unsafe_allow_html=True
)

"# Center an image when in fullscreen"
"Images (and most elements in general) are always aligned to the left"
st.image("https://placekitten.com/g/200/200")

[Muhammad_Ali]

I use this, and it works:

left_co, cent_co,last_co = st.columns(3)
with cent_co:
    st.image(logo)