Code Editor for app.py

"""
Centering elements in streamlit
"""
import streamlit as st

# Approach 1: using columns.
# Pros: simple, an easy to use
# Cons: doesn't perfectly align elements: it just places them in the
#       center but they remain aligned to the left)

# create 3 columns
col1, col2, col3 = st.columns([1, 1, 1])

# place our elements in the second column
with col2:
    st.title('This is some title')
    st.image("http://placekitten.com/200/200")
    st.button("Click me")

# Approach 2: inline CSS
# Pros: centers correctly
# Cons:
#   1. Can only use it to align HTML elements. i.e. you cannot use it to align st.button or any other control
#   2. Needs custom CSS for different elemeents

style_heading = 'text-align: center'
style_image = 'display: block; margin-left: auto; margin-right: auto;' 

st.markdown(f"<h1 style='{style_heading}'>This is another title</h1>", unsafe_allow_html=True)
st.markdown(f"<img src='http://placekitten.com/200/200' style='{style_image}'/>", unsafe_allow_html=True)

# cannot align this!
st.button("Click this")