Html/css flex: предотвращение переполнения элемента окна браузера
Я пытаюсь создать сегмент веб-страницы, в котором изображение будет отображаться слева или справа, а непосредственно рядом с ним может быть текст, центрированный в соответствующем сегменте страницы (см. изображение). Однако элемент, содержащий текст, шире, чем доступное для него пространство, поскольку по умолчанию он равен ширине всей страницы, несмотря на то, что он расположен немного вправо, что приводит к смещению текста по центру.
Есть ли способ учесть переменную ширину изображения без этого переполнения?
Вот фрагменты HTML и CSS для элементов, которые я использую, и фотография проблемы:
.row {
display: flex;
flex:0 0 100%;
max-height:80%;
width:100%;
}
.column {
display: flex;
flex-direction: column;
flex:0 0 100%;
justify-items: center;
max-height:50%;
width:100%;
}
img {
display:flex;
margin: 0;
padding: 0;
object-fit: contain;
}<div class = "row" style = "max-height: 80%">
<img src = "./images/garden-state.webp">
<div class = "column" style = "width:min-content;">
<div class = "title" style = "background-color: #1b1b1b; max-height: 30%;"><h3>Garden State</h3></div>
</div>
</div>В идеале текст должен быть центрирован по горизонтали в видимой части элемента заголовка. Я пробовал несколько разных значений для переменной width, от разных процентов до min-content и тому подобное, но ничего не изменилось.
Любая помощь приветствуется!
Ответы 3
Если вы просто хотите центрировать текст в h3. Можно просто добавить h3 {text-align: center}. Он должен центрировать текст по доступной ширине.
Однако, если вы хотите удалить лишнюю ненужную горизонтальную прокрутку. Вы можете попробовать что-то вроде этого: удалить заданную ширину и скрыть переполнение, чтобы ширина устанавливалась автоматически. Вы можете посмотреть на это, например. Codepen_Example
.row {
overflow: hidden;
}
Горизонтальная прокрутка происходит потому, что вы изменили flex-shrink на «0» с помощью сокращенного объявления flex:0 0 100%;, предотвращая сжатие контейнера в соответствии с доступным пространством. Декларация flex даже не нужна.
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
width: 100%;
}
.title {
color: white;
background-color: #1b1b1b;
text-align: center;
}
img {
max-width: 50%;
}<div class = "row">
<img src = "https://i.sstatic.net/wiKmgQpY.jpg">
<div class = "column">
<div class = "title"><h3>Garden State</h3></div>
</div>
</div>CSS-код
.row {
display: flex;
max-height:80%;
width:100%;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100vw;
background-color: #1b1b1b;
}
img {
display:flex;
position:absolute;
margin: 0;
padding: 0;
object-fit: contain;
}
HTML-код
<div class = "row" style = "max-height: 80%">
<img src = "image.jpeg"> <!--Add image-->
<div class = "column">
<div class = "title" style = "color: white; "><h3>Garden State</h3></div>
</div>
</div>
Попробуйте этот код...
Проголосуйте, если это было полезно :)
Пожалуйста. Рад был помочь :)
Вы, сэр, святой, спасибо 🙏 Единственная проблема в том, что
position: absoluteна изображении привело к тому, что оно слишком сильно переполнилось, но если оставить это изменение, это именно то, к чему я стремился.