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)

Colan

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.

Korfonta

Answer 2

Here's another approach, simplifying this answer a bit and avoiding HTML:

import streamlit as st  # 1.18.1

with st.columns(3)[1]:
     st.header("hello world")
     st.image("https://picsum.photos/200/200")

Or if you're just rendering one item:

st.columns(3)[1].header("hello world")

If you want to center the text within the column, though, it seems HTML is the only way. If you don't mind globally centering all <h2>s, you can use:

style = "<style>h2 {text-align: center;}</style>"
st.markdown(style, unsafe_allow_html=True)
st.columns(3)[1].header("hello world")

See also Center Streamlit Button.

Eimile

Answer 3

Using columns to align the image in the center won't work all the time. A more concrete option would be to use markdown to show the image.

But first the image has to be converted to Base64. Below is the solution to do so for a png image.

# Solution provided by dataprofessor (https://discuss.streamlit.io/t/image-in-markdown/13274/10) modified by mze3e to center the image
# img_to_bytes and img_to_html inspired from https://pmbaumgartner.github.io/streamlitopedia/sizing-and-images.html

import base64
from pathlib import Path

def img_to_bytes(img_path):
    img_bytes = Path(img_path).read_bytes()
    encoded = base64.b64encode(img_bytes).decode()
    return encoded
def img_to_html(img_path):
    img_html = "<img src='data:image/png;base64,{}' class='img-fluid'>".format(
      img_to_bytes(img_path)
    )
    return img_html

st.markdown(<p style='text-align: center; color: grey;'>"+img_to_html('image.png')+"</p>", unsafe_allow_html=True)

Enyedy

Answer 4

To center an image quickly and, with best way which works for any pixel width and height:

st.markdown("<img src='https://static.streamlit.io/examples/dog.jpg' width='100' style='display: block; margin: 0 auto;'>" , unsafe_allow_html=True)

here

Cade