How can I center a picture?

How can I center a picture?


This is the picture I normally displayed

image
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?

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

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")

alignleft

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

aligncenter


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")
1 Like

I use this, and it works:

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

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.