How do i align st.title?

how do i align st.title ?

Hi @qxlsz.

I would like to help. But I need more info to be able to help.

Please be a bit more specific. What do you mean by align? Horizonally, vertically or…

The best approach is to provide a small code example and a screenshot that shows how it looks and indicates how it should look.

Thanks.

I would like to get align center
i currently have
st.title("Some title")
but the title doesnt show in the center

1 Like

Hi @qxlsz,

Currently it’s not possible to set title and header alignment. Our layout is done in Markdown which doesn’t contain a native notion of text alignment (it’s all left-justified by default).

Additionally I don’t think it will work to use HTML to force the alignment, since the style will get overridden by Streamlit’s CSS. (I am not great at CSS, though; maybe it’s possible with some HTML/CSS wizardry?)

If this is an important feature for you, I recommend opening a Feature Request in our github issues.

2 Likes

Hello @qxlsz,

Actuallly, as hinted by @nthmost, you CAN align HTML through Markdown :

import streamlit as st
st.markdown("<h1 style='text-align: center; color: red;'>Some title</h1>", unsafe_allow_html=True)

…but unsafe_allow_html is probably going to be deprecated soon, so we can’t count on this.

I tried adding a CSS file in the static folder where Streamlit is installed but no luck :sweat_smile: (EDIT : but it can work if done correctly !)

There’s a feature in RISE that allows to inject custom CSS classes over RISE CSS but they allow display of HTML so that makes it easier. I would be interested in custom CSS but maybe it would be too cumbersome to add a list of editable CSS classes as arg of each Streamlit Python method and pointing them to our external CSS file ?

So if you really want to edit CSS, for now the way to go would be to edit the SCSS in Streamlit source code and rebuild the frontend part.

EDIT : well actually someone did load it’s custom CSS and it’s easy. You can follow the discussion to see how it goes .

3 Likes

Ah hah! Thanks @andfanilo, I was trying to do it with span tags (which didn’t work!) and didn’t think about simply stuffing the h1’s style keyword. Thanks!

2 Likes