How to create a text hyperlink aligned centrally

Using Streamlit
1

Hi there,

So I can create myself a hyperlink as follows:

link = f'[{text_string_variable}]({url_string_variable})'
st.markdown(link, unsafe_allow_html=True)

However, it is left aligned. Might you help me with a workaround for how to align this centrally?

Cheers!
Alex

2

Hey @Alex-Robson, welcome to the Streamlit forum!

You can center a link as follows:

import streamlit as st

# not centered
st.markdown(
    """<a href="https://www.example.com/">example.com</a>""", unsafe_allow_html=True,
)

#centered
st.markdown(
    """<a style='display: block; text-align: center;' href="https://www.example.com/">example.com</a>
    """,
    unsafe_allow_html=True,
)

image
image823Ă—788 6.33 KB

1 Like
3

Hi Randy, thanks for the reply!

I would like to dynamically load the link depending on input. Something like the following:

# latin name hyperlink
latin_name = plant_df['latin_name'].values[0]
wiki_url = plant_df['link'].values[0]
link = f'[{latin_name}]({wiki_url})'
st.markdown(link, unsafe_allow_html=True)

I am having difficulty getting pythons f’{}’ funtionality to work within you example. Sorry to bother you further but can you think of an easy solution?

Cheers!
Alex

4

Haven’t tried locally, but it seems like you should move the f-string portion to the st.markdown line. What happens when you run it the way you have it written?