Центрированные предметы с расстоянием между ними - PullRequest
Новая
       1

Центрированные предметы с расстоянием между ними

1 голос
/ 04 февраля 2020

Я хочу создать веб-сайт, и в этом у меня есть что-то вроде «о нас» и хочу поместить такие данные

enter image description here

Но Я хочу установить расстояние между предметами и установить его по центру. 

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  font-family: arial;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.title {
  color: grey;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

img {
  display: flex;
}
<body>
  <div class="card">
    <img src="img/1.jpg" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
  <div class="card">
    <img src="img/1.jpg" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
</body>

Ответы [ 3 ]

2 голосов
/ 04 февраля 2020

Простая идея для того, что вам нужно, используя flex

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 500px;
  text-align: center;
  font-family: arial;
  display: inline-block;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 33%;
  margin: 0 auto;
}


.title {
  color: grey;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

img {
  display: flex;
}
.grid-wrap{
   display: flex;
   flex-wrap: wrap;
}
.card + .card{
margin-left: 10px;
}
.card img {
    width: 60px !important;
    height: 60px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 50%;
}
<body>
<div class="grid-wrap">
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
  </div>
</body>
1 голос
/ 04 февраля 2020

Поместите два div карты в родительский div и задайте ширину родительского элемента, например, 90% с отображением flex, центр выравнивания элементов, центр выравнивания контента http://jsfiddle.net/a9CR7/, о котором вы можете узнать больше о flex https://www.w3schools.com/css/css3_flexbox.asp

<body>
<div class="parent">
  <div class="card">
    <img src="img/1.jpg" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
  <div class="card">
    <img src="img/1.jpg" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
</div>
</body>

.parent{
  display: flex;
  width: 90%;
  margin: 0 auto;
  background-color: red;
  justify-content: space-around;
  align-items: center;

}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  font-family: arial;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.title {
  color: grey;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

img {
  display: flex;
}
0 голосов
/ 04 февраля 2020

Вы можете использовать flexbox с space-evenly: 

body {
  display: flex;
  justify-content: space-evenly;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 500px;
  text-align: center;
  font-family: arial;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.title {
  color: grey;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

img {
  display: flex;
}
<body>
  <div class="card">
    <img src="img/1.jpg" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
  <div class="card">
    <img src="img/1.jpg" alt="John" style="width:100%">
    <h1>John Doe</h1>
    <p class="title">Що робил(а)</p>
    <p>Навчання</p>
    <div style="margin: 24px 0;">
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...