Если ctn должен быть фиксированного размера (например, 150×150), а изображение должно быть пропорциональным и не больше, чем этот div, это решение:
CSS
.ctn{
цвет фона:#F00;
поле слева: авто;
поле справа: авто;
должность: родственница;
переполнение: скрыто;
высота: 150 пикселей;
ширина: 150 пикселей;
}
.ctn div{
дисплей: таблица-ячейка;
вертикальное выравнивание: посередине;
выравнивание текста: по центру;
}
.ctn div img{
ширина: 150 пикселей;
}
HTML
<дел>
Таким образом, div будет центрирован по центру экрана, а изображение не будет больше 150×150, но сохранит свою пропорциональность.
Дайте id понравившемуся
затем в вашем css →
#foto{
поле слева: 180px;
}
установить
также указать ширину изображения, иначе оно не будет работать
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как центрировать изображения, заголовок Latex, заголовок и т.
д.? — 🎈 Использование Streamlit
ajaanbaahu
#1
Во-первых, отличная библиотека, простота использования и множество функций.
Таким образом, я могу отображать изображения как в необработанном виде, так и с использованием значений пикселей, добавлять заголовок и заголовки. Я могу использовать st.image, st.latex, st.pyplot и т. д. Мне интересно, есть ли способ настроить позиционирование или выравнивание вышеперечисленного. Например, выравнивание текста по левому или правому краю или отображение изображений в центре, а также некоторый контроль над тем, сколько доступного пространства страницы можно использовать. В настоящее время говорят, что если я показываю 2 изображения рядом, есть много пустого белого пространства по обе стороны от изображений, которые потенциально могут быть использованы. Просто интересно, есть ли что-то, чтобы настроить его.
и фанило
#2
Здравствуйте, @ajaanbaahu, добро пожаловать на форум
Для выравнивания текста по левому/правому/среднему краю вы можете выровнять HTML через st.markdown с unsafe_allow_html=True (см. этот ответ)
Что касается макета изображения, существует постоянная проблема с горизонтальной компоновкой и компоновкой сетки, которая, мы надеемся, решит ваши проблемы. Возможно, вы можете отправить скриншоты того, что вы пытаетесь решить по этим вопросам, чтобы помочь разработчикам спроектировать Layout API! Мне также интересно, какой дизайн вы пытаетесь реализовать.
1 Нравится
аджаанбааху
#3
Хорошо, приятно знать. Используя это, я могу получить st.markdown по центру. Я также делаю st.latex("что-то здесь") , а также st.image("sketch.png", width = 150) . В случае эскиза он всегда появляется слева. Любая идея, как привести изображение в центр?
1 Нравится
ифанило
#4
Для выравнивания изображений существует хакерский способ, вы можете повозиться с CSS, надеюсь вам понравится CSS
style.css
body {
цвет фона: #eee;
}
.fullScreenFrame > div {
дисплей: гибкий;
выравнивание содержимого: по центру;
}
app. py
с open("style.css") как f:
st.markdown(''.format(f.read()), unsafe_allow_html=True)
путь = "..."
изображение = Image.open(путь)
st.write("привет мир")
st.image(изображение, ширина = 150)
st.write("Прощай, мир")
, но это может быстро стать проблематичным, так как это центрирует все изображения, а не только одно конкретное изображение, на которое вам нужно будет внедрить свой собственный класс CSS, что в настоящее время невозможно… Также я не смотрел, если .fullScreenName только появляется в родительском div потокового изображения, может быть, например, st.map , и это может центрировать его… надеюсь, это не так.
Первоначально я хотел найти .stImage и перейти к его родителю, чтобы изменить выравнивание по центру, но это не выглядит возможным только в селекторе CSS. Возможно, вы можете сделать это с помощью JS, но я не проверял так далеко…
кор { минимальная высота: 150 пикселей; минимальная ширина: 150 пикселей; поле слева: авто; поле справа: авто; выравнивание текста: по центру; отображение: таблица-ячейка; вертикальное выравнивание: посередине}
кор {
минимальная высота: 150 пикселей;
минимальная ширина: 150 пикселей;
поле слева: авто;
поле справа: авто;
выравнивание текста: по центру;
отображение: таблица-ячейка;
вертикальное выравнивание: посередине}
д.? — 🎈 Использование Streamlit
Просто интересно, есть ли что-то, чтобы настроить его.
py 