Align headers and buttons in the middle of the sidebar

I am new to streamlit and seeking the way to align headers and buttons in the middle of the sidebar.
Currently headers are located in the middle but buttons are on the left.
Much appreciated if anyone tells me how to do that.
Thanks in advance,
Screenshot 2023-05-19 172847

You can make use of the st.sidebar and CSS styling

import streamlit as st

# Add custom CSS styles
    .sidebar .sidebar-content {
        display: flex;
        flex-direction: column;
        align-items: center;

# Use st.sidebar to create the sidebar
with st.sidebar:
    # Center-aligned headers
    st.markdown("<h1 style='text-align: center;'>Sidebar Header 1</h1>", unsafe_allow_html=True)
    st.markdown("<p style='text-align: center;'><button>Button 1</button></p>", unsafe_allow_html=True)

    st.markdown("<h1 style='text-align: center;'>Sidebar Header 2</h1>", unsafe_allow_html=True)

    # Center-aligned buttons
    st.markdown("<p style='text-align: center;'><button>Button 2</button></p>", unsafe_allow_html=True)

Hope this helps!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.