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