Выровнять текст по центру миниатюры

Question

Выровнять текст по центру миниатюры

0

У меня есть несколько уменьшенных изображений, которые при наведении имеют многоцветный стиль наведения (выглядит так: желтая миниатюра - это то, на что похоже, когда вы наводите на нее курсор)

Единственная проблема заключается в том, что я не могу заставить текст внутри выравниваться вертикально в середине миниатюры, не нарушая что-то еще. Когда я изменяю.thumb для отображения: table; и.align-mid для отображения: table-cell; с вертикальным выравниванием: среднее; текст выравнивается к середине, но цвет фона становится непрозрачным. Похож:

Я не могу понять, как это сделать.

HTML:

<div class="thumb" onclick="location.href='{{ cms:page:thumb_one.link:string }}'">
    {{ cms:page_file:thumb_one.image:image}}
    <div class="align-mid">
        {{ cms:page:thumb_one.text:string }}<br>
        {{ cms:page:thumb_one.description:string }}
    </div>
    <div class="yellow">
    </div>
</div>

CSS:

.thumb {
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   display:inline-block;
   position: relative;
   height: 170px;
   width: 235px;
   overflow: hidden;
}
.thumb:after {
   background: rgba(255,255,255,.7);
   content:'';
   display: block;
   height: 170px;
   left: 0;
   opacity: 0;
   padding: 20px;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
}

.thumb:hover:after {
   opacity: 1;
   padding: 20px;
   transition: opacity .4s;
}

.thumb:hover > .align-mid {
   background-color: transparent;
   color: white;
}

.thumb:hover {
   cursor: pointer;
}

.thumb img {
     height: 100%;
     width: 100%;
}   

.yellow {
     opacity: 0;
}  

.thumb:hover .yellow {
   background: rgba(255,213,43,.8);
   content:'';
   display: block;
   left: 13px;
   right: 13px;
   bottom: 13px;
   top: 13px;
   opacity: 1;
   position: absolute;
   transition: opacity .4s;
   z-index: 2;
}

.align-mid {
   background-color: rgba(0,0,0,.5);
   color: rgb(255,213,43);
   height: auto;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
   top: -105px;
   width: 100%;
   z-index: 3;
}

Eric Filkins 17 апр. 2014, в 06:38

Источник

0

как вы вставляете изображения в div?
ProllyGeek 17 апр. 2014, в 04:00
0

Это делается динамически через CMS, но это {{ cms:page_file:thumb_one.image:image}} преобразуется в тег изображения
Eric Filkins 17 апр. 2014, в 04:08
0

ага вот почему css испорчен
ProllyGeek 17 апр. 2014, в 04:09
0

попробуйте это: .thumb img {height: 100%; ширина: 100%; позиция: абсолютная; }
ProllyGeek 17 апр. 2014, в 04:11
1

Boom. Хаха, не могу поверить, что все было так просто. Если вы поставите это в ответе, я отмечу это как правильное. Большое спасибо!
Eric Filkins 17 апр. 2014, в 04:16
0

конечно рад помочь вам в любом случае.
ProllyGeek 17 апр. 2014, в 04:17

Показать ещё 4 комментария

Теги:

html

css

image

hover

1 ответ

Ещё вопросы

как вы вставляете изображения в div?
Это делается динамически через CMS, но это {{ cms:page_file:thumb_one.image:image}} преобразуется в тег изображения
попробуйте это: .thumb img {height: 100%; ширина: 100%; позиция: абсолютная; }
Boom. Хаха, не могу поверить, что все было так просто. Если вы поставите это в ответе, я отмечу это как правильное. Большое спасибо!
конечно рад помочь вам в любом случае.

ProllyGeek · Accepted Answer · 2014-04-17T02-05-00.000Z

Очевидно, что когда ваша обложка имеет больше, чем ребенок, и все дети рассматриваются как ячейки таблицы, в случае, если вы не хотите, чтобы они были уложены вертикально (ось y), вам нужно назначить абсолютное позиционирование для каждого, таким образом они будут уложенные друг на друга (ось z)

поэтому простым решением будет:

.thumb img { height: 100%; width: 100%; position:absolute; }