Centre widget horizontally within column

🎈 Using Streamlit
8

Not sure I totally understood, but with your code snippet are you talking

image
image1352×246 3.71 KB

Instead of

image
image1330×230 3.72 KB

?

You can cheat an answer through the CSS hack, if you know your way around CSS:

import streamlit as st
from datetime import datetime as dt
import calendar as clndr

cyr = 2021
cmnt = 12
myclndr = clndr.monthcalendar(cyr, cmnt)
wk1 = myclndr[0]
html_str_a = ""
html_str_b = ""
cols = st.columns(7)

for vday in wk1:
    if vday > 0:
        cols[vday].markdown(
            html_str_a + str(vday).zfill(2) + html_str_b, unsafe_allow_html=True
        )
        cols[vday].button(":spiral_calendar:", key=f"DY{vday}")
    else:
        cols[vday].write(" ")

st.markdown(
"""
<style>
div[data-testid="stVerticalBlock"] div[data-testid="stMarkdownContainer"] p {
	background-color:red;
	text-align: center;
}
</style>
""",
unsafe_allow_html=True
)

I tried summarizing here: CSS hacks for the dumb? - #3 by andfanilo

And @dataprofessor made a video about it :slight_smile: How to apply custom CSS styles in Streamlit apps - YouTube

It’s hard to deal with and maintain but possible. I don’t think there is a Github issue on that though (we do have the horizontal align issue: Vertical alignment for columns · Issue #3052 · streamlit/streamlit (github.com) so feel free to create an issue to track it.

Best,
Fanilo

1 Like