Центрирование абзаца в столбце встроенного блока - PullRequest
Новая
       53

Центрирование абзаца в столбце встроенного блока

0 голосов
/ 14 октября 2019

Я получил сетку стиля кладки, как это: 

  <div class="masonry">
      <div class="brick">
         <p>Img Title</p>
         <img src="img.jpg">
      </div>
      <div class="brick"> 
       ....
      </div>
  </div>

С этим css: 

.masonry {
  transition: all .5s ease-in-out;
  column-gap: 00px;
  column-fill: initial;
  box-sizing: content-box;
}

.masonry .brick {
  text-align: center;
  margin-bottom: 0px;
  display: inline-block;
  vertical-align: top;
}

.masonry .brick p{
    color: black;
    position: absolute;
    transition: all .5s ease-in-out;
}

.masonry .brick img {
  max-width: 100%;
  vertical-align: middle;
  transition: all .5s ease-in-out;
  backface-visibility: hidden;
}

Как бы я центрировал тег p (вертикальный и горизонтальный) вмакет масонства с помощью css?

Как только я меняю положение на что-то вроде left = 50%, он попадает на половину сетки масонства, а не на один кирпич по какой-то причине. Выравнивание текста: центр, кажется, не работает вообще.

Идея, конечно, такова: если вы наводите курсор на одно изображение, в середине отображается заголовок изображения.

Ответы [ 4 ]

1 голос
/ 14 октября 2019

Используйте обновленный ниже CSS 

.masonry {
  transition: all .5s ease-in-out;
  column-gap: 00px;
  column-fill: initial;
  box-sizing: content-box;
}

.masonry .brick {
  text-align: center;
  margin-bottom: 0px;
  display: inline-block;
  vertical-align: top;
  position:relative;
}

.masonry .brick p{
    color: black;
    position: absolute;
    transition: all .5s ease-in-out;
    left:50%;
    margin:0;
    top:50%;
    transform:translate(-50%,-50%)
}

.masonry .brick img {
  max-width: 100%;
  vertical-align: middle;
  transition: all .5s ease-in-out;
  backface-visibility: hidden;
}

Вы можете использовать положение: абсолютное с левым: 50% и верхнее: 50%, чтобы отцентрировать элемент, и вы можете перевести его обратно на половину его ширины и высоты, используятрансформировать: переводить (-50%, -50%). Чтобы рассматривать элемент .brick как родительский элемент для элемента абсолютного p, необходимо добавить позицию: относительно него.

1 голос
/ 14 октября 2019 
.masonry .brick {
   text-align: center;
   margin-bottom: 0px;
   display: inline-block;
   vertical-align: top;
   position:relative;
 }
 .masonry .brick p{
    color: black;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%;-50%;
    transition: all .5s ease-in-out;
    z-index:10;
 }

Абсолютные элементы располагаются на первом относительном родителе, поэтому вам нужно установить свой кирпичик как относительный .... и затем налево: будет работать 50%, но это будет 50% слева и это не по центру. так что тогда вам нужно положить его обратно, преобразовав его .. попробуйте и посмотрите :)

0 голосов
/ 14 октября 2019

Вы можете попытаться удалить позицию absolute из тега p. 

.masonry .brick p{
  color: black;
  transition: all .5s ease-in-out;
}
0 голосов
/ 14 октября 2019

Вы можете использовать position:absolute и transform: translate(-50%, -50%); для горизонтального и вертикального центра 

.masonry {
  transition: all .5s ease-in-out;
  column-gap: 00px;
  column-fill: initial;
  box-sizing: content-box;
  position: relative;
  width:200px;
}

.masonry .brick {
  text-align: center;
  margin-bottom: 0px;
  display: inline-block;
  vertical-align: top;
}

.masonry .brick p{
    color: black;
    position: absolute;
    transition: all .5s ease-in-out;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color:red;
}

.masonry .brick img {
  max-width: 100%;
  vertical-align: middle;
  transition: all .5s ease-in-out;
  backface-visibility: hidden;
}
<div class="masonry">
    <div class="brick">
       <p>Img Title</p>
       <img src="http://homepages.cae.wisc.edu/~ece533/images/cat.png">
    </div>
    <div class="brick"> 
     ....
    </div>
</div>
...