CODEWITHSUNDEEP
htmlcss
MiMiMiEnot
MiMiMiEnot

Reputation: 27

Centered items with a distance between them

I wanna to create a website and in that I have something like "about us" and wanna to put a data like that

enter image description here

But I wanna set distance between items and set it centered.

.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>

Upvotes: 1

Views: 142

Answers (3)

Awais
Awais

Reputation: 4902

A simple idea for what you need using 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>

Upvotes: 2

Nourhan Ahmed
Nourhan Ahmed

Reputation: 179

Put the two div of the card in a parent div and give the parent width for example 90% with display flex,align-items center,justify-content center http://jsfiddle.net/a9CR7/ you can read more about 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;
}

Upvotes: 1

Valentin Duboscq
Valentin Duboscq

Reputation: 978

You can use flexbox with 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>

Upvotes: 1

Related Questions