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

[estem]

HI,

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

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

thanks

[Faltawer]

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
    )

[estem]

thanks but , it gives me this

[Faltawer]

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

[estem]

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

[edsaac]

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
Dark

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;
}

[kishor1]

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;
}

[edsaac]

@kishor1

# Assuming st.logo is a custom function you've defined

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

[estem]

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

[kishor1]

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