How to center images, Latex header, title etc.?

🎈 Using Streamlit
1

First, great library, easy to sue and lots of functionalities.

So I am able to display images both raw and using pixel values, add header and titles. I am able to use st.image, st.latex, st.pyplot etc.
I was wondering if there is any way to adjust the positioning or alignment of the above. For instance left or right align text, or display images in the center as well as some control as to how much of the available space of the page can be utilized. Currently say if I am displaying 2 images side by side there is a lot of empty white space n either side of the images that can be potentially be used. Just wondering if there is something to customize it.

2

Hello @ajaanbaahu, welcome to the forums :slight_smile:

  • For left/right/middle text alignment you can align HTML through st.markdown with unsafe_allow_html=True (see this answer)
  • For image layout, there is an ongoing issue around Horizontal Layout and Grid Layout which hopefully would solve your problems. You can maybe send screenshots of what you are trying to accomplish on those issues to help the devs design the Layout API :slight_smile: ! I’m also interested in what design you are trying to accomplish.
1 Like
3

Ok good to know. Using this I can get st.markdown to center.
I am also doing st.latex("some thing here") as well as st.image("sketch.png", width = 150). In the case of sketch it always appears on the left. Any idea how to bring the image in the center?

1 Like
4

For aligning images, there is a hacky way, you may tinker with the CSS, hope you like CSS :upside_down_face:

style.css

body {
    background-color: #eee;
}

.fullScreenFrame > div {
    display: flex;
    justify-content: center;
}

app.py

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

path = "..."
image = Image.open(path)

st.write("hello world")
st.image(image, width = 150)
st.write("bye world")

but that can quickly become problematic as this center all images and not only one specific image, on which you’d need to inject your own CSS class which is not currently possible…
Also I did not look if .fullScreenName only appears in parent div of streamlit images, maybe st.map does too for example and that could center it…hopefully it’s not the case.

What I initially wanted to do was find .stImage and go its parent to change the center alignment but that does not look possible in CSS selector alone. Maybe you can do that with JS but I did not test that far…

Hope that answers some of your questions !

4 Likes
5

If you just need something quick, I created three columns and put the image I wanted in the center column and left the other two columns empty.

col1, col2, col3 = st.beta_columns([1,6,1])

with col1:
st.write("")

with col2:
st.image("https://i.imgflip.com/amucx.jpg")

with col3:
st.write("")
7 Likes