How to center st.spinner

🎈 Using Streamlit
1

Summary

I know how to center a button, it’s included in the snippet below. I tried centering the st.spinner the same way but I couldn’t. How do I center it?

Code snippet:

st.markdown("""
  <style>
  div.stButton {text-align:center}
  </style>""", unsafe_allow_html=True)
  
  st.markdown("""
  <style>
  div.stSpinner {
    text-align:center;
    align-items: center;
    justify-content: center;
  }
  </style>""", unsafe_allow_html=True)
  
  button = st.button("Click me")
  
  spinner = st.spinner('working...',)

  if button:
    with spinner:
      output = function()
    st.write(f"""{output}""")
2

Hey again!

You almost have it right :slight_smile: Your CSS should target the div inside the spinner: div.stSpinner > div.

2 Likes
3

Thanks!

how would I know this on my own though.
is it in the documentation somewhere?

4

CSS styling with st.markdown is not official, but you can check in the forum for guidance (there are already many threads on the topic).

What is really helpful is using your browser’s Developer Tools once have opened your app (for clarification: run app in browser → right click anywhere → click on “Inspect”). The will help you identify which classes, ids, elements to target. Knowledge of CSS and HTML syntax also helps.

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.