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

2 Likes

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 .

13 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

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

Hi @woden,

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

Thanks
Charly

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

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

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

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.

Let me know if that would work?

Best,
Charly

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,

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

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

1 Like

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