Feature request: Add alignment arguments to Streamlit elements

Hi everyone,

Bit of an intro about me and my Streamlit experiences first:

I’ve discovered Streamlit about 2 months ago coming from a DevOps and Full-stack background and have been heavily addicted to it since and feeling way more productive getting ideas done rather than using Flask or FastAPI and rendering your own html templates from scratch.

While poking around I ran into some spacing bugs(opened a Github issue for a bug related to only setting an Emoji with st.title that removed the sidebar close button) but ran into some more which I still need to submit(for instance a number_input will add more margin around it than a selectbox which makes a page layout look inconsistent with those 2 inputs and st.markdown text above each widget).

Although Streamlit takes some hacky solutions now and then, like the Sessionstate object or making multiple pages with radio buttons instead of regular “stateful” buttons that are bigger and easier to hit on mobile, I can still definitely see the awesome potential of Streamlit and I’m hoping to help fix some of the open issues as well.

Now to get to the point of this post:
As I’m using Streamlit more as a web/app dev than as a Data scientist I’m often running into the default left-alignment of the Streamlit elements.
Being able to control the in-grid/in-container alignment with an argument for example:
st.image(image, halign='center', valign='center')
Is something that would benefit me greatly with the lay-out of my pages.

I’ve tried to get a center aligned image using use_column_width=‘always’ as an argument but text underneath the image always looks off(even in the same column), like the image is still not fully centered no matter what width I use for it or it’s the text itself that is unable to center-align. Messing around with colums didn’t get a perfect center alignment either and trying to get it centered at the top in the streamlit sidebar didn’t work as well.

I’d love to know if there’s a way to get this done and maybe I just didn’t find the correct way to do it yet.
If there isn’t a way to do it yet I’m very curious if it’s a reasonable improvement request or maybe slightly impossible to add to the way Streamlit currently works.

Thanks for reading and thanks for an awesome framework :smiley:

1 Like