css 如何在streamlit中居中标题和图像?

r55awzrz  于 2023-02-17  发布在  其他
关注(0)|答案(3)|浏览(1033)

我已经试过下面的命令来设置标题,但是我做不到。对于图片,我只是设法通过增加大小使其居中,以便它填充整个页面。st.title()st.image是否有任何参数允许我将它们居中?

title_alignment=
"""
<style>
#the-title {
  text-align: center
}
</style>
"""
st.markdown(title_alignment, unsafe_allow_html=True)
km0tfn4u

km0tfn4u1#

要使文本居中,您可以使用markdown,如下所示:

#A streamlit app with two centered texts with different seizes
import streamlit as st

st.markdown("<h1 style='text-align: center; color: grey;'>Big headline</h1>", unsafe_allow_html=True)

st.markdown("<h2 style='text-align: center; color: black;'>Smaller headline in black </h2>", unsafe_allow_html=True)

或者你可以像这样使用streamlit的column关键字:

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    st.write(' ')

with col2:
    st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
    st.write(' ')

这将创建容器,您可以在其中添加文本和图像。这样您就可以居中图像。

4zcjmb1e

4zcjmb1e2#

使用分栏居中对齐图像并不总是有效的,一个更具体的选择是使用markdown来显示图像。
但首先图像必须转换为Base64。下面是为png图像这样做的解决方案。

# Solution provided by dataprofessor (https://discuss.streamlit.io/t/image-in-markdown/13274/10) modified by mze3e to center the image
# img_to_bytes and img_to_html inspired from https://pmbaumgartner.github.io/streamlitopedia/sizing-and-images.html

import base64
from pathlib import Path

def img_to_bytes(img_path):
    img_bytes = Path(img_path).read_bytes()
    encoded = base64.b64encode(img_bytes).decode()
    return encoded
def img_to_html(img_path):
    img_html = "<img src='data:image/png;base64,{}' class='img-fluid'>".format(
      img_to_bytes(img_path)
    )
    return img_html

st.markdown(<p style='text-align: center; color: grey;'>"+img_to_html('image.png')+"</p>", unsafe_allow_html=True)
izkcnapc

izkcnapc3#

下面是另一种方法,稍微简化this answer并避免HTML:

import streamlit as st  # 1.18.1

with st.columns(3)[1]:
     st.header("hello world")
     st.image("http://placekitten.com/200/200")

或者,如果仅渲染一个项目:

st.columns(3)[1].header("hello world")

如果你想让文本在列中居中,HTML似乎是唯一的方法。如果你不介意全局居中所有<h2>,你可以用途:

style = "<style>h2 {text-align: center;}</style>"
st.markdown(style, unsafe_allow_html=True)
st.columns(3)[1].header("hello world")

另请参见Center Streamlit Button

相关问题