How do i align st.title?

Using Streamlit
1

how do i align st.title ?

2

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.

3

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

2 Likes
4

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
5

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 .

19 Likes
6

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
7

If you inspect the element, there’s the default setting that the h1 tag would have an id the same as your text. It’s possible to customize the alignment for different h1. For example:

st.title("The title")

The id would be “the-title”. Therefore, you can tweak the position with markdown and CSS

title_alignment=
"""
<style>
#the-title {
  text-align: center
}
</style>
"""
st.markdown(title_alignment, unsafe_allow_html=True)
2 Likes
8

Hi @woden,

Please would you mind clarying the issue you may be facing here?

Thanks
Charly

9

Hi @Charly_Wargnier,
Actually, I had another post regarding the plotly_chart alignments with HTML components. The issue I am facing is that the HTML code would be cut or under the plotly chart.

Having a look at the element, the chart is the svg type, which is hard to align with HTML code. Using the streamlit.title, the h1 tag is wrapped by the markdown class, which perfectly solves my issue.

However, the issue of alignment with HTML code and charts could be challenging for me.

Regards,

1 Like
10

Thanks @woden

For clarity’s sake, I’d suggest sending us the following:

  • The app + its code
  • A quick mock-up of how you would like things to be like

With these to hand, we should be able to help you get what you’d want :slight_smile:

Best
Charly

11

Hi @Charly_Wargnier
I’ve made a demo of what it looks like to use component.html with customized style above the plotly chart.
https://share.streamlit.io/wodenwang820118/streamlit_bug/main/app.py

The code is here, in Github.

Please advise if I could do it better.

Sincerely,

1 Like
12

Thanks @woden

I believe you could add empty blocks via e.g. st.text("") in order to move the chart down and display your text.

image
image961Ă—143 8.56 KB

Let me know if that would work?

Best,
Charly

13

Hi @Charly_Wargnier
Yes, it would work, but it’s a little bit hacky since the style could change every time. And the alignment problem happens with the HTML component, not the st.title, which works perfectly.

Sincerely,

14

I’m sure by now someone, somewhere has already used CSS to get this, but some people are not very familiar with that, so this is the trick I’ve got.

colT1,colT2 = st.columns([1,8])
with colT2:
st.title(“Major Consumer Bundle Analysis”)

You can just keep playing with the ratio, or just the 8 to get the right center. It won’t be perfect but its consistent and it is pretty easy. Plus it works with more than just the st.title

Thanks

1 Like
15

to align any text you can add \t
to get into the next line use \n
It worked for me.

1 Like
16

Thx @andfanilo, this helped me a lot in my project. :grinning::grinning:

17

I made a little (40 line) demo for anyone trying to align their st.title with CSS

image
image1270Ă—1100 31.5 KB

18

I was trying to do this and found two methods: st.columns, and CSS. (here’s the complete code).

Approach 1: using st.columns

image

  • Pros: simple, an easy to use
  • Cons: doesn’t perfectly align elements: it just places them in the center but they remain aligned to the left)
import streamlit as st

# create 3 columns
col1, col2, col3 = st.columns([1, 1, 1])

# place our elements in the second column
with col2:
    st.title('This is some title')
    st.image("http://placekitten.com/200/200")
    st.button("Click me")

Approach 2: inline CSS

image

  • Pros: centers correctly
  • Cons:
    1. Can only use it to align HTML elements. i.e. you cannot use it to align st.button or any other control
    2. Needs custom CSS for different elements
import streamlit as st
style_heading = 'text-align: center'
style_image = 'display: block; margin-left: auto; margin-right: auto;' 

st.markdown(f"<h1 style='{style_heading}'>This is another title</h1>", unsafe_allow_html=True)
st.markdown(f"<img src='http://placekitten.com/200/200' style='{style_image}'/>", unsafe_allow_html=True)

# cannot align this!
st.button("Click this")