如何在流光中对标题和图像进行居中？
如何在流光中对标题和图像进行居中？
提问于 2022-01-31 20:38:33
我已经尝试了下面的命令标题，但我做不到。对于图像，我只是设法通过增加大小，使它填充整个页面。对于st.title()和st.image，有什么参数可以让我把它们集中起来吗？
title_alignment=
"""
<style>
#the-title {
text-align: center
}
</style>
"""
st.markdown(title_alignment, unsafe_allow_html=True)回答 2
Stack Overflow用户
发布于 2022-02-01 13:49:34
要使文本居中，您可以使用下面这样的标记：
#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的列关键字，如下所示：
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(' ')
这将创建容器，您可以在其中添加文本和图像。这样你就可以对图像进行居中。
Stack Overflow用户
发布于 2022-10-31 07:02:34
使用列对齐中心的图像并不总是有效的。一个更具体的选择是使用标记来显示图像。
但首先，必须将图像转换为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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70932538
复制相关文章
相似问题
腾讯云开发者
