Styling einer Reihe von Bildern mit Text

Question

Ich versuche, eine Reihe von Bildern/Text einheitlich aussehen, aber die Bilder haben nicht die gleiche Auflösung. Ich habe eine Reihe von ihnen wie folgt aus:

.QuickLink { 
 
    display: inline-block; 
 
    border: 2px solid #9FAFEC; 
 
    border-radius: 4px; 
 
    text-align: center; 
 
    width: 100px; 
 
    vertical-align: top; 
 
    margin-top: 4px; 
 
    padding: 2px; 
 
    height: 160px; 
 
} 
 

 
.QuickLink img { 
 
    width: 80px; 
 
    margin: auto; 
 
} 
 

 
.QuickLink a { 
 
    text-decoration: none; 
 
    color: black; 
 
}

<div class="QuickLink"> 
 
    <a href="someLink.htm"> 
 
    <img src="images/Directory.jpg" title="Directory"> 
 
    <br> Directory 
 
    </a> 
 
</div>

Was ich suche eine Reihe von Rechtecke ist, wo das Bild vertikal zur Mitte ausgerichtet ist und der Text ist auf der Unterseite. Das Folgende bringt mich näher, aber ich bin nicht sicher, wie man die vertikale Ausrichtung macht.

Answer 1

Lösung 1 (empfohlen)

.QuickLink { 
    position: relative; 
} 

.QuickLink a { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Lösung 2

.QuickLink { 
    display: table; 
    float: left; // if you want them to align horizontally 
} 

.QuickLink a { 
    display: table-cell; 
    vertical-align: middle; 
} 

Lösung 3 (möglicherweise Browser-Kompatibilität Problem haben)

.QuickLink { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: flex; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    align-items: center; 
    -webkit-justify-content: space-around; 
    -moz-justify-content: space-around; 
    justify-content: space-around; 
} 

Wenn Sie .QuickLink horizontal ausrichten möchten, wickeln Sie sie in einen Container ein.

<div class="container"> 
    <div class="QuickLink"> 
     ... 
    </div> 
</div> 

und stellen Sie den Behälter wie so:

.container { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: flex; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    align-items: center; 
    -webkit-justify-content: space-around; 
    -moz-justify-content: space-around; 
    justify-content: space-around; 
} 

Answer 2

Durch die Anzeige Einstellung als auch Inline-flex die oberen und unteren Rand auf Auto auf dem Anker-Tag als Einstellung, ich war in der Lage zu erreichen, Nach was suchst du.

Check out this jsfiddle

<div class="QuickLink" > 
     <a href="someLink.htm"> 
      <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" title="Directory"> 
      <br> 
      Directory 
     </a> 
    </div> 

<div class="QuickLink" > 
     <a href="someLink.htm"> 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmzMFjujgib4Md4MHoGD4VoIDwqjaG3DDrylUns_rY8dgSuybA" title="Info"> 
      <br> 
      Info 
     </a> 
    </div> 
.QuickLink 
    { 
     display: inline-flex; 
    justify-content:center; 
     border:2px solid #9FAFEC ; 
     border-radius:4px; 
     text-align: center; 
     width:100px; 

     margin-top:4px; 
     padding:2px; 
     height:160px; 
    } 

    .QuickLink img 
    { 
     height:50px; 
     width:auto; 
    } 

    .QuickLink a 
    { 
     text-decoration: none; 
     color:black; 
     margin:auto 0; 
    } 

Answer 3

Wie Sie für den Wrapper feste Höhe verwenden, können Sie position:absolute auf den ein-Tags verwenden. Sie sind mit oben positioniert links 50% und dann für die Höhe des einen Tag kompensieren Transformation verwenden:

https://jsfiddle.net/ymv6bL7s/7/

.QuickLink 
 
{ 
 
    display: inline-block; 
 
    border:2px solid #9FAFEC ; 
 
    border-radius:4px; 
 
    text-align: center; 
 
    width:100px; 
 
    vertical-align: top; 
 
    margin-top:4px; 
 
    padding:2px; 
 
    height:160px; 
 
    position:relative; 
 
} 
 

 
.QuickLink img 
 
{ 
 
    width:80px; 
 
    margin: auto; 
 
} 
 

 
.QuickLink a 
 
{ 
 
    text-decoration: none; 
 
    color:black; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%, -50%); 
 
}

<div class="QuickLink" > 
 
    <a href="someLink.htm"> 
 
    <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" title="Directory"> 
 
    <br> 
 
     Directory 
 
    </a> 
 
</div> 
 

 
<div class="QuickLink" > 
 
    <a href="someLink.htm"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmzMFjujgib4Md4MHoGD4VoIDwqjaG3DDrylUns_rY8dgSuybA" title="Info"> 
 
    <br> 
 
    Info 
 
    </a> 
 
</div>

Answer 4

Sie Flexbox, um das zu tun verwenden können:

.QuickLink a 
{ 
    width: 100%; 
    height: 100%; 

    display: flex; 
    flex-direction: column; 
    align-items: center; 

    text-decoration: none; 
    color:black; 
} 

Aber jetzt werden Bilder nicht perfekt in der Mitte von Div sein, weil der Text auf der Unterseite einige nimmt Ort. Wenn Sie das ändern möchten, müssen Sie einige Verbesserungen in HTML vornehmen, z. Wrap Text in SPAN Tags, sie absolute Position und eine relative Position zu A-Tag hinzu:

.QuickLink span { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
.QuickLink a { 
    [...] 
    position: relative 
} 

Fiddle: https://jsfiddle.net/JacobDesight/ymv6bL7s/8/