CSS picture gland effect case study

CSS picture gland effect case study

Recently in the static page of a website, found that there are many pictures of the layout of the effect, special to record the layout skills.

What do you do when you encounter this layout:

The first reaction is definitely floating, yes, you can put these pictures in the UL list of the Li tag, to each LI tag to add img and text. Such as:

<ul>
  <li> <img src= "" " alt=""><p>Text</P></li>
  <li><img src= "" " alt=""><p>Text</P></li>
  <li><img src= "" " alt=""><p>Text</P></li>
</ul>

Then use absolute positioning, relative positioning, to adjust the gland to the appropriate position.
This is not the point, the focus is how to make the text vertically centered on the gland layer, perhaps a line of text vertical center is easy, but two lines, more than the line.
Very simple, to the text under the Gland layer settingsdisplay:table;To set the text againdisplay:table-cell;Andvertical-align:middle;You can do it.
This is because the Vertical-align property is not available in form elements.
So turn the box into a form element.
I am only demonstrating the practice of two boxes here, the code is as follows:

*{
         margin:0 ;
         padding:0 ;
         font-family:"Microsoft Yahei" ;
         color:#fff ;
}
     . Box {
         position:relative ;
         float:  Left;
         width: 200px  ;
         height: 200px  ;
         margin-right:20px ;
}
     . Mask {
         position: Absolute ;
         display: table ;
        Left  :0 ;
         Bottom:0 ;
         width: 176px  ;
         height: 44px  ;
         padding:10px 12px  ;
         background: rgba(0,0,0,.  5) ;
}
     . Mask P {
         display:table-cell;
         vertical-align: Middle;
}


<Div class="Box">
<img src="Images/hot1. jpg"alt= "" >
<Div class="Mask">
<PWhy does the > Gourd Temple fire? </P>
</Div>

</Div>
<Div class="Box">
<img src="Images/Hot2. jpg"alt= "" >
<Div class="Mask">
<P> What's so special about the golden cudgel of Monkey King? </P>
</Div>

</Div>

Click here to see Demo:https://cyanar.github.io/relative-absolute/%E5%8E%8B%E7%9B%96%E5%9B%BE%E7%89%87%E6%96%87%E5 %ad%97%e5%b1%85%e4%b8%addemo.html

CSS picture gland effect case study