How to add a title at the top middle of the page

Using Streamlit
,
1

HI,

I would like to display a title at the top, middle of the page,

image
image1887×866 16.3 KB

i have tried many streamlit components but it defeats me. I’n new to streamlit.

thanks

2

Hey,
You can use some CSS code to workaround:

    st.markdown("""
        <style>
               /* Remove blank space at top and bottom */ 
               .block-container {
                   padding-top: 0rem;
                   padding-bottom: 0rem;
                }

        </style>
        """, unsafe_allow_html=True)

    st.markdown(
        """
        <h1 style="text-align: center; margin-top: 0;">
            Your Title Here
        </h1>
        """,
        unsafe_allow_html=True
    )
3

thanks but , it gives me this :slight_smile:

image
image1835×132 4.39 KB

4

If it’s a riddle game it can work :smiley:
Did you try to play with the padding block +or- on the value.

5

what i’m looking for is, align the title at the same level of the logo, if you notited the result which i got from your code …it seem at the buttom

6

Using version 1.40, I would:

  1. Wrap the title in a st.container and assign a key to target the CSS styling
  2. Set the background of the header transparent and reduce the top padding of the main app
  3. Style the title using the key from step 1
Mode Sidebar open Sidebar closed
Light
image
image2318×1408 304 KB
image
image2318×1408 281 KB
Dark
image
image2318×1408 303 KB
image
image2318×1408 283 KB
Code:

my_app.py

import streamlit as st

with open("style.css") as css:
    st.html(f"<style>{css.read()}</style>")

with st.container(key="app_title"):
    st.title("My Unique Title App")

st.logo(
    "https://placehold.co/600x60?text=XD+Long+Logo",
    icon_image="https://placehold.co/60x60?text=XD",
)

st.title("A small title for a section")
st.header("A header")
st.subheader("A subheader")
st.write("A repeated paragraph" * 50)

with st.sidebar:
    st.title("A sidebar title")
    st.header("A sidebar header")
    st.subheader("A sidebar subheader")

style.css

header.stAppHeader {
    background: rgba(0, 0, 0, 0);
}

div.stMainBlockContainer {
    padding-top: 0.2rem;
}

div.st-key-app_title div.stHeading {
    text-align: center;
}

div.st-key-app_title div.stHeading h1 {
    font-family: monospace;
    letter-spacing: -5px;
}
7

Here is what worked for me.

import streamlit as st

with open("style.css") as css:
    st.markdown(f"<style>{css.read()}</style>", unsafe_allow_html=True)

st.markdown("<h1 class='custom-title'>My Unique Title App</h1>", unsafe_allow_html=True)

# Assuming st.logo is a custom function you've defined
if hasattr(st, 'logo'):
    st.logo(
        "https://placehold.co/600x60?text=XD+Long+Logo",
        icon_image="https://placehold.co/60x60?text=XD",
    )
else:
    st.image("https://placehold.co/600x60?text=XD+Long+Logo")

st.title("A small title for a section")
st.header("A header")
st.subheader("A subheader")
st.write("A repeated paragraph" * 50)

with st.sidebar:
    st.title("A sidebar title")
    st.header("A sidebar header")
    st.subheader("A sidebar subheader")

css

.custom-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: rgb(20, 19, 19);
    z-index: 999;
    text-align: center;
    font-family: monospace;
    letter-spacing: -.99px;
}

.stApp > header {
    background-color: transparent;
}

.main .block-container {
    padding-top: 5rem;
}
8

Consider upgrading your Streamlit version, st.logo was introduced with version 1.35.0.

9

thanks but the css part in the style.css does not applied. I dont know why? is there an extra configuration i need to add to make the css file readable. ?
thanks

10

Usually, I add the CSS within the same python file instead of styles.css. Could you try that instead?