css horizontale Mittel Bilder ohne Verwendung von% Prozent

Question

Es gibt einige zusätzlichen Platz auf der rechten Seite in meiner Galerie ...

Meine Bilder Container:

.my-gallery figure { 
    display: block; 
    float: left; 
    width: 150px; 
} 

Ist es möglich, Bilder machen immer horizontales Zentrum in unterschiedlich großen Bildschirm ohne mit % percent value? Oder hat jemand eine geniale Idee, die extra Raum nicht so komisch macht?

Oder % percent value Trick ist der einzige Weg?

In Bildschirm A:

In Bildschirm B:

.my-gallery { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.my-gallery img { 
 
    width: 100%; 
 
    height: 112px; 
 
} 
 
.my-gallery figure { 
 
    display: block; 
 
    float: left; 
 
    margin: 0 5px 5px 0; 
 
    width: 150px; 
 
} 
 
.my-gallery figcaption { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    min-height: 26px; 
 
} 
 
.my-gallery img { 
 
    max-width: 100%; 
 
}

<div class="my-gallery"> 
 
    <figure> 
 
    <a href="big1.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="1" /> 
 
    </a> 
 
    <figcaption>111111111111111111111111</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="big2.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="2" /> 
 
    </a> 
 
    <figcaption>222222222222222222222222</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="big3.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="3" /> 
 
    </a> 
 
    <figcaption>3333333333333333333333333333333</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="big4.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="4" /> 
 
    </a> 
 
    <figcaption>444444444444444444444444</figcaption> 
 
    </figure> 
 
    ... 
 
</div>

Answer 1

WennVerwendungist ein Problem, Sie könnten css flexbox verwenden, um dies zu erledigen.

https://jsfiddle.net/76dybc3p/1/

ändern css von .my-gallery und entfernen Sie die Schwimmer in figure

.my-gallery { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
} 
.my-gallery figure { 
    display: block; 
    margin: 0 5px 5px 0; 
    width: 150px; 
} 

Answer 2

habe ich keine Ahnung, warum Sie nicht% verwenden würde, aber das ist eine andere Alternative: eine Tabelle verwenden, um Gerüst Ihre Elemente und legen Sie das Eigenschaftentabelle-Layout fest: behoben;

HTML

<table> 
    <tr> 
     <td> 
      1 
     </td> 
     <td> 
      2 
     </td> 
     <td> 
      3 
     </td> 
    </tr> 
</table> 

CSS

table{ 
    table-layout: fixed; 
} 

Answer 3

Die praktischste Ansatz ist @media Abfrage

ich auch geändert, um die .my-gallery Regel

zu verwenden

.my-gallery { 
    margin: 0 auto 
} 

Beispiel Schnipsel

.my-gallery { 
 
    margin: 0 auto 
 
} 
 
.my-gallery img { 
 
    width: 100%; 
 
    height: 112px; 
 
} 
 
.my-gallery figure { 
 
    display: block; 
 
    float: left; 
 
    margin: 0 5px 5px 0; 
 
    width: 150px; 
 
} 
 
.my-gallery figcaption { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    min-height: 26px; 
 
} 
 
.my-gallery img { 
 
    max-width: 100%; 
 
} 
 
@media screen and (min-width: 310px) { 
 
    .my-gallery { 
 
    width: 310px; 
 
    } 
 
} 
 
@media screen and (min-width: 465px) { 
 
    .my-gallery { 
 
    width: 465px; 
 
    } 
 
} 
 
@media screen and (min-width: 620px) { 
 
    .my-gallery { 
 
    width: 620px; 
 
    } 
 
}

<div class="my-gallery"> 
 
    <figure> 
 
    <a href="big1.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="1" /> 
 
    </a> 
 
    <figcaption>111111111111111111111111</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="big2.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="2" /> 
 
    </a> 
 
    <figcaption>222222222222222222222222</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="big3.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="3" /> 
 
    </a> 
 
    <figcaption>3333333333333333333333333333333</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="big4.jpg"> 
 
     <img src="http://placehold.it/112x150" alt="4" /> 
 
    </a> 
 
    <figcaption>444444444444444444444444</figcaption> 
 
    </figure> 
 
</div>