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
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.
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 (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 .
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!
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)
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,
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
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,
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
to align any text you can add \t
to get into the next line use \n
It worked for me.
Thx @andfanilo, this helped me a lot in my project.
I was trying to do this and found two methods: st.columns
, and CSS
. (here’s the complete code).
Approach 1: using st.columns
- 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
- Pros: centers correctly
- Cons:
- Can only use it to align HTML elements. i.e. you cannot use it to align
st.button
or any other control - Needs custom CSS for different elements
- Can only use it to align HTML elements. i.e. you cannot use it to align
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")