Как центрировать изображение в CSS Grid? - PullRequest
Новая
       7

Как центрировать изображение в CSS Grid?

0 голосов
/ 24 апреля 2018

Как сделать так, чтобы изображение располагалось вертикально по центру слева, а текст справа? 

.pricing1box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  color: #444;
  margin-top: 150px;
  justify-content: center;
}

.pricing1box-div {
  background-color: orange;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
}
<div class="pricing1box">
  <div class="pricing1box-div">
    <img src="http://placehold.it/350x150.png" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
    <h6 style="color: black; padding: 10px;">Title</h6>
    <p style="font: 10px blue;">Powered by me</p>
    <br>
    <p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 24 апреля 2018

Вы можете использовать свойства сетки для изображения и текста, а также.Просто сделайте родительский контейнер сеткой. 

.pricing1box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;  
  color: #444;
}

.pricing1box-div {
  display: grid;         /* new; nested grid container */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  background-color: orange;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
}

.pricing1box-div img {
  grid-column: 1;
  grid-row: 1 / -1;      /* from first line at start, to first line at end */
  align-self: center;    /* vertical centering */
  width: 100px;
}

.pricing1box-div :not(img) {
  grid-column: 2;
}
<div class="pricing1box">
  <div class="pricing1box-div">
    <img src="http://placehold.it/350x150.png">
    <h6 style="color: black; padding: 10px;">Title</h6>
    <p style="font: 10px blue;">Powered by me</p>
    <p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
  </div>
</div>
0 голосов
/ 25 апреля 2018

Вы также можете смешивать flex & grid для удобства чтения 

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  align-content: bottom;
}

div {
  display:flex;
  align-items: center; /* Vertical center of image & text */
  background-color: orange;
}

p {
  padding: 100px 10px; /* Demo stuff */
}
<div>
  <img src="//placecage.com/100/100">
  <p>text here</p>
</div>
0 голосов
/ 24 апреля 2018

Попробуйте: 

  position: relative;
  top: 50%;
  transform: translateY(-50%);

или, может быть, вам просто нужно это: align = "middle" 

<img src="http://placehold.it/350x150.png" align="middle" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
...