How to center images, Latex header, title etc.?

Using Streamlit
4

For aligning images, there is a hacky way, you may tinker with the CSS, hope you like CSS :upside_down_face:

style.css

body {
    background-color: #eee;
}

.fullScreenFrame > div {
    display: flex;
    justify-content: center;
}

app.py

with open("style.css") as f:
    st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)

path = "..."
image = Image.open(path)

st.write("hello world")
st.image(image, width = 150)
st.write("bye world")

but that can quickly become problematic as this center all images and not only one specific image, on which youā€™d need to inject your own CSS class which is not currently possibleā€¦
Also I did not look if .fullScreenName only appears in parent div of streamlit images, maybe st.map does too for example and that could center itā€¦hopefully itā€™s not the case.

What I initially wanted to do was find .stImage and go its parent to change the center alignment but that does not look possible in CSS selector alone. Maybe you can do that with JS but I did not test that farā€¦

Hope that answers some of your questions !

4 Likes