Не удалось поместить мой div в центр страницы
У меня есть div, и в div я поместил изображение. Я пытаюсь расположить этот div в центре страницы, но не могу. Пожалуйста помогите. Спасибо !
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
}
</style>
</head>
<body>
<div class = "bannerimage">
<img src = "images/mailer2.jpg">
</div>
</body>
Возможный дубликат Как горизонтально центрировать <div>?
Ответы 6
Вы можете использовать display: flex для своего класса bannerimage, чтобы легко центрировать его. Надеюсь это поможет
.bannerimage {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: -webkit-fill-available;
}
Теперь я хочу добавить отступы к контейнеру. Я дал прокладку, но, похоже, она не работает. Не могли бы вы посмотреть, что я делаю неправильно здесь? Спасибо .bannerimage { display: flex; flex-направление: строка; выравнивание элементов: по центру; выравнивание содержимого: по центру; высота: -webkit-fill-доступно; отступ: 20 пикселей; }
Попробуйте добавить div-оболочку к изображению. Проверьте эту скрипку. Надеюсь, это поможет jsfiddle.net/SJ_KIllshot/1f83dqkn
img {
display:block;
margin: auto;
}<body>
<div class = "bannerimage">
<img src = "https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width = "150px;" height = "150px;">
</div>
</body>Проверьте этот код. Я думаю, это то, что вы хотите. :)
Можно как уже написали использовать display:flex;
но есть и другие способы:
* {
margin : 0;
padding : 0;
}
.bannerimage {
margin : 0 auto;
min-width : 20%;
max-width : 1000px;
text-align : center;
backgroud : #000;
}
Что я сделал, так это дал .bannerimage атрибуты минимальной и максимальной ширины, вместо этого вы также можете использовать ширину.
Редактировать:
Поскольку я не знаю разрешения вашего изображения, это был базовый пример. как использовать маржу только для того, чтобы показать вам, как «центрировать» сам div.
Теперь все голосуют против, даже не задумываясь об этом: вот рабочий пример с рабочим кодом! МОЙ БОГ!
https://jsfiddle.net/kymd1jv7/
Если вы не зададите этому классу определенную ширину, большинство браузеров обрабатывать этот класс, так как он будет иметь ширину 100%.
«Изображение» также может быть центрировано с помощью text-align : center;
Это даже неправильно. Вот рабочий пример с вашим кодом внутри, которую вы должны были сделать сами. jsfiddle.net/oc53bxaf
Ты шутишь? Это будет центрировать класс div, а не изображение. Если вы добавите цвет фона или как написано text-align : center, он также будет центрировать изображение.
создайте рабочую скрипту с вашим css и разметкой, опубликованной консультантом.
так что добавьте правильный css к вашему ответу
Выравнивание текста: по центру; было упомянуто в первую очередь! Все, что я действительно добавил, это цвет фона, чтобы показать, что сам div объявлен.
Там. Предоставление полных фрагментов и создание рабочего примера являются частью предоставления хорошего ответа на вопрос. И смотрите, ваши отрицательные голоса волшебным образом исчезли.
И все. Вы правы в этом вопросе, это то, к чему я должен привыкнуть.
способов много и это вдобавок от https://stackoverflow.com/users/362477/iamnotsam
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
width:100px;
}
body{
height:100%;
}
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class = "bannerimage">
<img class = "content" src = "images/mailer2.jpg">
</div>
</body>
Вы можете добиться этого, используя свойство transform. Имейте в виду, что родительский div должен быть relative
.bannerimage {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:1px solid red
}<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div class = "bannerimage">
<img src = "images/mailer2.jpg">
</div>
</body>добавить контейнер с заданной шириной (ширина: 100% или отображение: flex)
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
.container{
display:flex;
}
#bannerimage {
margin: 0 auto;
}<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div class = "container">
<img src = "https://picsum.photos/" id = "bannerimage">
</div>
</body>
с какой проблемой вы столкнулись?