Center an image on the sidebar

🎈 Using Streamlit
1

I have placed an image on the sidebar however the only way I am able to center it is using the column width option. Is there a way to center the image while being able to adjust the image width instead of relying on the sidebar column width? Thanks.

2

If I got this correctly, the page’s CSS can be tweaked such that the image width is modified while keeping it centered. Is this the result you’re looking for?

centerImageInSidebar

import streamlit as st

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

with st.sidebar:
    "# Center an image in the sidebar"
    "This image is centered in the sidebar"
    st.image("https://placekitten.com/g/200/200")

"Behavior of other images stays unaltered"
st.image("https://placekitten.com/g/500/400", width=100)
1 Like
3

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