CSS для центрирования всего относительного тела по горизонтали, без обертки или полос прокрутки?
Какой CSS будет центрировать все относительно расположенное тело веб-страницы ЛЮБЫЕ, без полос прокрутки и с одинаковым отсечением содержимого переполнения слева и справа от области просмотра?
Когда страница отображается, если самый широкий элемент шире области просмотра, тогда я хочу, чтобы левая и правая стороны содержимого «отваливались» от сторон экрана. Переполнение как слева, так и справа должно быть обрезано/спрятано.
Ширина содержимого непредсказуема и часто может быть шире области просмотра. Мы всегда должны видеть средний фрагмент, без полос прокрутки.
Не повторяющийся вопрос
Пожалуйста, не отмечайте "дублировать". Никакой ответ на эти вопросы не достигает моей желаемой цели. Я протестировал каждый из них.
Как выровнять все тело html по центру?
align body to center - центрирование тела
Как центрировать тело на странице?
В отличие от обычных ответов на приведенные выше вопросы, у меня есть нет возможность обернуть содержимое в div. Я могу работать только с тегами html и body.
Требуемый HTML:
Этот вопрос не позволяет изменить этот html. Ваш ответ CSS должен работать с веб-страницей Любые. Эти элементы являются лишь примерами — в html может быть гораздо больше непредсказуемых элементов. Вы не можете обернуть содержимое в контейнер div. Ваш ответ CSS должен отображать центральную часть страницы, обрезая слева и справа любой контент, который не помещается на экране.
<html>
<body>
Overflow to left
<div id = "wider">Center-screen</div>
</body>
</html>
Требуемый CSS
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position: relative;
}
Вы не можете изменить этот CSS, только добавьте новый CSS. Нужен position:relative на теле.
Элемент #wider — это просто пример широкого контента. Реальное использование будет включать гораздо больше элементов непредсказуемой ширины.
Вывод должен отображать что-то вроде изображения ниже, без полос прокрутки. Текст «Переполнение слева» должен быть обрезан за пределы экрана слева. Слова «Центр экрана» должны располагаться точно по центру по горизонтали.
Нерабочее решение 1:
Ответ ниже, из аналогичного вопроса, не достигает моей цели:
html,
body {
height: 100%;
}
html {
display: table;
width: 100%;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Нерабочее решение 2:
Другой ответ на аналогичный вопрос, похоже, не работает для моего сценария:
body {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Рабочий пример:
Эта рабочий пример содержит мой HTML вместе с приведенным выше неудачным ответом. Не стесняйтесь проверить свой ответ в этой скрипке.
Желаемый вывод из HTML выше:
Ответы 5
Если я вас правильно понял, вы могли бы сделать что-то вроде этого:
body {
overflow-x: hidden;
}
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
position: relative;
left: 50%;
transform: translate(-50%);
}Overflow to left
<div id = "wider">Center-screen
</div>Спасибо, но это просто выравнивает все по левому краю и показывает полосу прокрутки по горизонтали.
Упс, я неправильно истолковал CSS как часть требуемого кода. В любом случае, не могли бы вы сделать грубую картину того, чего вы пытаетесь достичь?
картинка добавлена к вопросу
Итак, в чем смысл части «Переполнение слева»? Потому что, если бы его не было, было бы легко центрировать этот огромный div, а скрытие полос прокрутки — это просто установка overflow-x в теле на hidden.
В моем случае я просто хочу увидеть центральный фрагмент тела и обрезать его по бокам. Я знаю, что это означает сокращение контента, и это нормально. В данном случае важен центральный срез.
Это то, что мой ответ уже делает. Чего я не понимаю, так это того, какова цель «Переполнения влево» и что это должно представлять. Потому что, если вы хотите, чтобы он был обрезан, вам нужно поместить его в свой div и выровнять по левому краю.
Добавлено к вопросу: этот вопрос не позволяет изменять этот CSS. Вы можете добавить только новый CSS. Этот элемент является просто примером широкого содержания. Реальное использование будет включать гораздо больше элементов непредсказуемой ширины.
забыл сказать, нужно положение: относительно тела.
Чтобы добиться горизонтального центрирования тела, вам нужно будет использовать элементы внутри div с такими свойствами: «flex-center flex-column»,
<h5 class = "animated fadeIn mb-3">Hello Mate.</h5>
<p class = "animated fadeIn text-muted">Mostafa Harb</p>
Привет товарищ. Я не могу использовать обертку/контейнер. Можно использовать только теги HTML и body. Я не вижу ваш CSS.
то, что вы можете сделать, это задать div шириной 100% и некоторой высотой, а затем поместить div в этот div и задать стиль float:center; и это все должно идти идеально с вами.
или вы можете сделать во всем div эти свойства стиля: align-items:center;align-contents:center;justify-items:center;align-items:center; и это также может делать то, что вы хотите.
<html> <style> .entire-div{ text-align: center; выровнять элементы: по центру; выровнять содержимое: центр; выравнивание-элементы: центр; выровнять элементы: по центру; } </style> <body> <div class = "entire-div"> <h1>Привет</h1> </div> </body> </html>
Спасибо, но похоже, что вы не использовали мой «требуемый HTML». Кроме того, вы используете контейнер div, который, как я уже упоминал, мы не можем сделать для этого вопроса. Кроме того, подумайте, что вам нужно поместить свой ответ в поле для ответа, а не в комментарий.
эти свойства - это то, что вы хотите достичь своей цели:
<html>
<style>
.entire-div{
text-align: center;
align-items:center;
align-content:center;
justify-items:center;
align-items:center;
}
</style>
<body>
<div class = "entire-div">
<h1>Hello</h1>
</div>
</body>
</html>
Спасибо, но, как я уже упоминал в вопросе, я не могу использовать контейнерный div, как вы делаете в этом ответе, ваш «.entire-div». Кроме того, вы все еще не используете мой необходимый HTML :) Пожалуйста, проверьте вопрос, спасибо.
хорошо, не могли бы вы сказать мне, что именно вы хотите, так как я читаю ваш вопрос в пятый раз, я не мог получить то, что вы хотите. С уважением.
Этот вопрос не позволяет изменить мой HTML или CSS. Вы можете добавить только новый CSS. Элементы в моем HTML — это просто примеры широкого контента. Реальное использование будет включать гораздо больше элементов непредсказуемой ширины.
забыл сказать, нужно положение: относительно тела.
Вы просто добавляете центр выравнивания текста в код CSS
HTML
<html>
<body>
Overflow to left
<div id = "wider">Center-screen</div>
</body>
</html>
css
#wider{
text-align:center;
}
Как упоминалось в вопросе, вы не можете изменить этот конкретный CSS. Единственный CSS, который вы можете изменить, это <html> и <body>. Мой элемент #wider — это всего лишь пример — я ищу CSS, который будет работать с ЛЮБЫМ веб-сайтом. -Спасибо
не могли бы вы рассказать мне, с какой проблемой столкнулись, и поделиться своим кодом. я исправлю
Вам просто нужно абсолютное позиционирование + преобразование: центрирование стиля перевода.
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position:absolute;
left:50%;
transform: translate(-50%);
margin:0;
overflow-x:hidden;
}<html>
<body>
Overflow to left
<div id = "wider">Center-screen</div>
</body>
</html>Прекрасная работа! Ты победил! Великолепно! Однако .... я сделал ошибку. Мне нужно, чтобы мое тело было position:relative. Я забыл указать это в вопросе. Виноват! :( Можете решить? Можете вставить CSS в <html>?
Да, вместо этого вы можете переместить CSS решения в элемент html. Это может зависеть от того, почему вам нужно, чтобы тело было position:relative.
Когда я сказал «поместите CSS в <html>», я имел в виду «Можете ли вы придумать какой-нибудь CSS, который можно применить к тегу HTML, чтобы решить мой вопрос?»
К сожалению, невозможно удалить требование для позиции: относительно тела.
Да я понял ваш вопрос. Тот же CSS, который я показал для элемента body, можно применить к элементу html вместо этого (за исключением margin:0, который все еще должен применяться к телу), и вы получите тот же результат. Затем к элементу body можно применить position:relative по вашему желанию.
Было бы здорово добавить ваш последний комментарий к ответу.
Джонни, но почему?