Почему мой заголовок Div не остается по центру, когда я прокручиваю изображение?
Я пытаюсь центрировать свой заголовок div. Большую часть времени это работает. Однако, как только я делаю ширину окна экрана меньше изображения и прокручиваю правую часть изображения, div заголовка начинает отклоняться влево. Кажется, я не могу решить эту проблему.
Это код, который у меня сейчас есть, и я попробовал все, что мог, чтобы центрировать его при прокрутке изображения, но просто не могу.
Чтобы понять, в чем моя проблема, перейдите в полноэкранный режим фрагмента, а затем сделайте окно достаточно маленьким, чтобы вам приходилось прокручивать его, чтобы увидеть остальную часть изображения. И как только вы прокрутите достаточно вправо, заголовок переместится влево.
Я хотел бы, чтобы изображение было одинаковой ширины и высоты.
.text{
text-align:center;
}
#header {
position: sticky;
left: 50%;
width: 200px;
height: 160px;
transform: translateX(-50%);
}
#div{
position: relative;
margin: auto;
height: 675px;
width: 1350px;
border: 5px solid black;
background:gray;
}
#image{
position:relative;
height:675px;
width:1350px;
}<div id = "header">
<h1 class = "text">Title</h1>
<h3 class = "text">SubTitle</h3>
<h2 class = "text">SubTitle</h2>
</div>
<div id = "div">
<img id = "image" src = "https://media.istockphoto.com/id/1411569800/photo/fluttering-blank-white-flag-on-flagpole-isolated-on-black-background.jpg?s=612x612&w=0&k=20&c=Nn74uzTU1_VWvGBdgr0Fk6Ahmqfj5ZX51WHjF1Vodts = ">
</div>Приятно знать, если что-то пойдет не так с моим текущим методом. К сожалению, моей проблеме это не помогло...
Ответы 2
Тег body по умолчанию отображается как блок (https://html.spec.whatwg.org/multipage/rendering.html#the-page), поэтому он устанавливает ширину на основе своего контейнера (окна) и серый div переполняется. Ваш липкий заголовок ведет себя нормально в пределах ширины тега body.
Я думаю, вы могли бы установить для тела значение display:inline-block, чтобы заставить его расширяться и содержать серый элемент div, но лично меня нервирует возможность возиться с тегами тела из-за того, как это может повлиять на расположение других элементов на странице. Можно ли поместить контент в контейнер? Если да, то я бы сделал следующее:
.text {
text-align: center;
}
#container {
display: inline-block;
}
#header {
position: sticky;
left: 50%;
width: 200px;
height: 160px;
transform: translateX(-50%);
}
#div {
position: relative;
margin: auto;
height: 675px;
width: 1350px;
border: 5px solid black;
background: gray;
}
и
<div id = "container">
<div id = "header">
<h1 class = "text">Title</h1>
<h3 class = "text">SubTitle</h3>
<h2 class = "text">SubTitle</h2>
</div>
<div id = "div">
</div>
</div>
Не могли бы вы сделать это работоспособным фрагментом? Потому что это все еще не решает мою проблему, сохраняя ее по центру, когда я прокручиваю изображение вправо.
Кроме того, я отредактировал свой пост, включив в него изображение, чтобы вы могли более четко видеть, чего я хочу достичь.
Я решил это. Я использовал вашу концепцию контейнерного div, но поместил ее исключительно для div с id = "div", а затем добавил overflow:scroll; и максимальная ширина: 100%; к этому.
Если вы хотите, чтобы заголовок располагался по центру в соответствии с размером экрана, вам нужно сделать родительский элемент div более гибким, чтобы он использовал 100% доступного пространства экрана. Вы можете добиться этого с помощью flexbox .
Ниже приведен простой пример, похожий на ваш фрагмент.
body{
margin: 0;
padding: 0;
}
#header{
position: sticky;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#div{
width: 100%;
height: 100px;
background-color: gray;
}
#image{
width: 100%;
height: 100px;
}<div id = "header">
<h1 class = "text">Title</h1>
<h3 class = "text">SubTitle</h3>
<h2 class = "text">SubTitle</h2>
</div>
<div id = "div">
<img id = "image" src = "https://media.istockphoto.com/id/1411569800/photo/fluttering-blank-white-flag-on-flagpole-isolated-on-black-background.jpg?s=612x612&w=0&k=20&c=Nn74uzTU1_VWvGBdgr0Fk6Ahmqfj5ZX51WHjF1Vodts = ">
</div>Это работает... но я бы хотел, чтобы мое изображение оставалось того же размера.
Я отредактировал свое сообщение, чтобы вы могли понять, что я имею в виду и чего хочу достичь.
Вы можете центрировать элемент div, задав для него значение поля:auto и ширину 50%, а не располагая его влево:50%. Вы можете увидеть, как это работает здесь, в школах W3C: w3schools.com/css/css_align.asp