如何使用CSS在Streamlit中实现列内元素居中？

方法1：用自定义HTML容器包裹按钮 #

通过在列内插入一个居中对齐的HTML容器，将按钮放入其中即可实现水平居中：

import streamlit as st

# 创建两列布局
col1, col2 = st.columns(2)

# 第一列的居中按钮
with col1:
    st.markdown("<div style='text-align: center;'>", unsafe_allow_html=True)
    st.button("按钮1")
    st.markdown("</div>", unsafe_allow_html=True)

# 第二列的居中按钮
with col2:
    st.markdown("<div style='text-align: center;'>", unsafe_allow_html=True)
    st.button("按钮2")
    st.markdown("</div>", unsafe_allow_html=True)

方法2：利用Streamlit内置的列对齐配置（适用于1.21+版本） #

如果你的Streamlit版本在1.21及以上，可以直接在创建列时设置水平对齐参数，快速实现按钮居中：

import streamlit as st

# 创建两列并设置水平对齐为居中
col1, col2 = st.columns(2, horizontal_alignment="center")

with col1:
    st.button("按钮1")

with col2:
    st.button("按钮2")

注：horizontal_alignment是1.21版本新增的参数，版本较低的话优先用方法1，或先升级Streamlit到最新版。

内容的提问来源于stack exchange，提问作者Krapka