How to center the title and an image in streamlit?

Question

I've already tried the command below for the title and I couldn't. For the image, I just managed to center it by increasing the size so that it fills the entire page. Are there any arguments to st.title() and st.image that allow me to center them?

title_alignment=
"""
<style>
#the-title {
  text-align: center
}
</style>
"""
st.markdown(title_alignment, unsafe_allow_html=True)

Answer 1

To center a text you can either use markdown like this:

#A streamlit app with two centered texts with different seizes
import streamlit as st

st.markdown("<h1 style='text-align: center; color: grey;'>Big headline</h1>", unsafe_allow_html=True)

st.markdown("<h2 style='text-align: center; color: black;'>Smaller headline in black </h2>", unsafe_allow_html=True)

Or you can use streamlit's column keyword like this:

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    st.write(' ')

with col2:
    st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
    st.write(' ')

This creates containers where you can add text and images. This way you are able to center images.