Как сделать несколько элементов div в другом элементе div горизонтально по центру?

-4

Я хочу, чтобы мои элементы div были центрированы в одной строке. Я хочу, чтобы это было сделано без использования фиксированного поля, потому что это не сработает, как только вы измените его размер или измените разрешение экрана.

Я пытался использовать "margin: 0 auto", но это не сработало. Я также споткнулся о нескольких разных вещах, но, честно говоря, все они были только мной в темноте.

HTML:

  <div class="container div3">
<div class="sredina">

<div class="box">
<img>
<h3></h3>
<p></p>
</div>

<div class="box">
<img>
<h3></h3>
<p></p>
</div>

<div class="box">
<img>
<h3></h3>
<p></p>
</div>

</div>

CSS:

.box{
text-align: center;
width: 20%;
border: 2px solid blue;
margin: 1pt;
float: left;}

.div3{
text-align: center;}

.sredina{
display: inline-block;
margin: auto;
border: 2px solid red;}

.container{
width: 80%;
margin: auto;
overflow: hidden;
}

Как это выглядит сейчас: изображение того, как это выглядит сейчас

Как я хочу, чтобы это выглядело: изображение того, как оно должно выглядеть

спросил(а) 2019-04-28T02:25:00+03:00 1 год, 2 месяца назад
0
57

Попробуйте использовать flex для вашего .sredina

https://codepen.io/anon/pen/zXbxym

.sredina{
display: flex;
justify-content: center;
align-items: strentch;
margin: auto;
border: 2px solid red;
}

ответил(а) 2019-04-28T02:29:00+03:00 1 год, 2 месяца назад
39

Попробуй это,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
background: #87ceeb;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;
}
.inner{
display: inline-block;
min-height: 100px;
height: 100px;
background: chartreuse;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">hello</div>
<div class="inner">hello</div>
<div class="inner">hello</div>
</div>
</body>
</html>

это работает хорошо на всех размерах экрана. Вы должны использовать

display: inline-block;

во внутреннем классе div

затем используйте

margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;

во внешнем див.

Подобный ответ здесь

ответил(а) 2019-04-28T03:06:00+03:00 1 год, 2 месяца назад
39

Используйте display: flex и justify-content: center в div .sredina внутри вашего контейнера:

https://codepen.io/HappyHands31/pen/qwvEez

ответил(а) 2019-04-28T02:31:00+03:00 1 год, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема