Home >Web Front-end >CSS Tutorial >CSS List Grid Layout Image Vertically Centered_Experience Exchange

CSS List Grid Layout Image Vertically Centered_Experience Exchange

WBOYOriginal: 2016-05-16 12:05:332121browse

<title>CSS List Grid View Layout</title>
<style> 
body{ 
   font-family:Arial; 
   text-align:center; 
}

}

.img-grid{ 
    width:603px; 
    margin:auto; 
    overflow:hidden; 
    position:relative; 
    border:solid 20px #CCCCCC; 
}

.img-grid h3{ 
    padding:0 0 12px 0; 
    background:#ccc; 
    margin:0; 
    font:normal normal bold 3em/normal "Georgia"; 
    letter-spacing:-0.1em; 
    text-align:center; 
}

.img-grid ul{ 
  list-style-type:none; 
  margin:-1px 0 0 -1px; 
  padding:0; 
  width:100%; 
  border-width:0px 1px 0 0;   
  position:relative; 
}

.img-grid li{ 
    zoom:1; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    vertical-align:middle; 
    width:200px; 
    padding:0 0 30px 0;

text-align:center; 
    position:relative; 
    border:solid 1px #dedede; 
    border-top-color:#CCCCCC; 
    margin:-1px -1px 0 0; 
    border-width:1px 0 0px 1px; 
    float:left; 
    display:inline; 
    font:150px/normal "Times new roman"; 
    *padding:0; 
    *font-size:180px; 
}

.img-grid li img { 
  vertical-align:middle; 
  background:#fff; 
  font-size:12px; 
  padding:2px; 
  border:solid 1px #555;

}

.img-grid li a:hover{ 
  text-indent:0;/*IE6 need this to trigger :hover*/ 
}

.img-grid li a:hover img{ 
  padding:1px; 
  border:solid 2px #336699; 
}

.img-grid li strong{ 
   display:block; 
   font:small/1.1 Arial; 
   background:#fff; 
   position:absolute; 
   bottom:0; 
   left:0; 
   width:100%;  
    
} 
.img-grid li strong a{ 
    display:block;     
    padding:8px 4px; 
    color:#336699; 
    text-decoration:none; 
    zoom:1; 
}

.img-grid li strong a:hover{ 
    text-decoration:underline; 
}

</style>
<h1>CSS List Grid Layout</h1> 
<p>Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21</p>
<div class="img-grid">

<h3>List Grid View</h3>
<ul>
<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members portal free.n</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">had brought members. Now football is laughing like a pain in the drink. Proin</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members get a free portal. A complete coaching. Proin</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members get a free portal. Complete coaching. Proin</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members get a free portal. He was a complete dignissim sheikh. Now football is laughing like a pain in the drink. Proin</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members get a free portal. Integer dignissim scelerisque massa.ndum adipiscing. Proin</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members get a free portal. Integer dignissim at Now football is laughing like a pain in the drink. Proin</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members of the free grocery portal</a></strong>
    </li>

<li>
        <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSS List Grid Layout Image Vertically Centered_Experience Exchange"></a>
        <strong><a href="#">members of the portal are free to drink. Proin</a></strong>
    </li>

</ul>
</div>

[Ctrl A 全选注:如需最最在线观看Js需新间设计设计设计]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：My opinion on the selection of image formats in html pages_Experience exchangeNext article：My opinion on the selection of image formats in html pages_Experience exchange

See more

CSS List Grid Layout Image Vertically Centered_Experience Exchange

Related articles