Hi, has there been any update on this feature? I am looking for something similar.

I have a similar request, though the solution might be a bit simpler.
In my case I want to align pictures to the bottom of the columns, instead of the default alignment at the top of each container.

Example:

Current behaviour is on the left side; it would be nice to have an option to align at the bottom to achieve the right side.

Reproducable code:

import streamlit as st

urls = ["https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=350&w=860",
        "https://images.pexels.com/photos/2014027/pexels-photo-2014027.jpeg?auto=compress&cs=tinysrgb&h=250&w=760",
        "https://images.pexels.com/photos/4056753/pexels-photo-4056753.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260",
        "https://images.pexels.com/photos/172421/pexels-photo-172421.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"]

caption = ["Cat-A", "Cat-B", "Cat-C", "Cat-D"]

cols = {}
for i in range(0, 4, 2):
    cols[i], cols[i+1] = st.beta_columns(2)
    cols[i].image(urls[i], caption=caption[i], use_column_width=True)
    cols[i+1].image(urls[i+1], caption=caption[i+1], use_column_width=True)

same features needed, any update?

Indeed -- I'm looking for the same functionality. Any updates?

Would love this feature, will stay tuned!

Any updates?

Any updates? Really need this haha

Hey all! We'll be working on layout options this summer and we definitely want to improve support for alignment. Don't know yet in detail how it will work, but we are all very aware of the pain to align things inside of columns! ;)

Thanks @jrieke! I was just experience the same issue, so wanted to share my example too as another use case

I'm aligning text/numbers/charts across columns and would like for them to all stay in a consistent row

By the way, I think I could do the text/number part with a dataframe, but it doesn't solve the chart piece. I tried containers too and didn't have any luck

import streamlit as st
import plotly.graph_objects as go

st.set_page_config(layout="wide")

col1, col2, col3, col4, col5, col6, col7 = st.columns(7)

with col1:
    st.markdown('This is a long line that will wrap if the screen is not wide')
    st.markdown('Just a short line')
    
    # alternate version with a container per column, still not working
    #c1 = st.container()
    #c1.markdown('This is a long line that will wrap if the screen is not wide')
    #c1.markdown('Just a short line')
    
    # third version with a container per column and row, still not working
    #c3 = st.container()
    #c3.markdown('This is a long line that will wrap if the screen is not wide')
    #c4 = st.container()
    #c4.markdown('Just a short line')
    
with col2:
    st.write(123456789)
    st.write(321)
    
    # alternate version with a container per column, still not working
    #c2 = st.container()
    #c2.write(123456789)
    #c2.write(321)
    
    # third version with a container per column and row, still not working
    #c5 = st.container()
    #c5.write(123456789)
    #c6 = st.container()
    #c6.write(321)
    
with col3:
    chart_values = [566559, 786901, 1810183, 2257403, 1355262]
    trend = go.Figure()
    trend.add_trace(go.Line(y=chart_values))
    trend.update_layout(width=250, height=250,
        xaxis={'showticklabels': False},
        yaxis={'showticklabels': False})
    st.plotly_chart(trend)

Output:

I want to align widgets horizontally. Is it possible with multiple columns container? Any help is appreciated!

I really appreciate any help you can provide.

Tried the approach below, but no luck!!

I'd love to be able to "center" an item in a column vertically. Is there already a workaround to achieve this? Otherwise I'll hope that the summer updates will help with this as well :).

@Khalilsqu you can't yet, that's why people are requesting that feature here. The request seems to be in the process from the streamlit team, but maybe someone can shine more light on where that stands/an ETA.

I've only found workarounds for table-like data, using st.dataframe or st.table, or creating a HTML table (and then using st.markdown(, allow_unsafe_html=True). For text boxes and drop downs, I'd be curious if anyone's found a good solution too - I've just done something like inserting st.write('') to force a extra space in one of the columns.

@msquaredds Thanks a lot for your answer. This is really unfortunate!!

Any update? I'm struggling to vertically align this lottie animation centered with the body text...

We are desperately waiting for this feature. Is there an ETA for this issue?

The alignment method can be controlled using CSS styles.

import streamlit as st
from PIL import Image


left, right = st.columns(2)

with left:
    st.markdown("""
# Hello
## It is n awesome app
""")

with right:
    st.image("https://cataas.com/cat")

st.write(
    """<style>
    [data-testid="stHorizontalBlock"] {
        align-items: center;
    }
    </style>
    """,
    unsafe_allow_html=True
)

The above works fine for text and images, but we still would like to see the possibility to align other streamlit objects like buttons and text inputs.

@carolinedlu did this enhancement not get past the "added-voting-callout" stage last year?

I've added this in my column, just before the streamlit object. This is far from pixel-perfect but was the best/only option I could find without affecting every reference of that object's class.
st.markdown("<br><br><br><br><br>", unsafe_allow_html=True)

Still eagerly awaiting this function...

Having columns(..., align: Literal["top", "middle", "bottom"] = "top", ...) would be amazing.
Having a grid element on top of the columns might help for the kinds of apps people would like to use this feature for as well, might be a cleaner solution than having to do it with columns and control over alignment and spacing. Something like grid(columns: SpecType, rows: SpecType, align_x: ..., align_y: ..., gap: ...)?

Hey all!

We started building an early prototype for this feature. It simply adds a parameter vertical_alignment="top"|"center"|"bottom" to st.columns. An early demo app with a link to the wheel file is here: https://vertical-alignment.streamlit.app/

I also added a few of the examples above to the demo app, thanks a lot to everyone who provided one! ❤️

We're still iterating on this since it doesn't yet solve all problems (especially aligning widgets with different sizes); see comments in the demo app. But if you give the wheel file a spin and have feedback, please let us know here!

Btw re grid: there's a grid layout in streamlit-extras that you can give a try. We might also integrate something like this into Streamlit in the future but I don't have a timeline yet.