Align headers and buttons in the middle of the sidebar

[TtTTTtTeee]

Hello,
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,

[cassteow]

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

import streamlit as st

# Add custom CSS styles
st.markdown(
    """
    <style>
    .sidebar .sidebar-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# 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!