Wyśrodkuj obraz poziomo w div

387

To prawdopodobnie głupie pytanie, ale ponieważ zwykłe sposoby wyśrodkowania obrazu nie działają, pomyślałem, że zapytam. Jak mogę wyśrodkować (poziomo) obraz wewnątrz div pojemnika?

Oto HTML i CSS. Dołączyłem również CSS dla innych elementów miniatury. Działa w kolejności malejącej, więc najwyższy element jest pojemnikiem na wszystko, a najniższy jest we wszystkim.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}
<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Okej, dodałem znaczniki bez PHP, więc powinno być lepiej widoczne. Żadne z tych rozwiązań nie działa w praktyce. Tekstu na górze i na dole nie można wyśrodkować, a obraz powinien być wyśrodkowany w div div kontenera. Kontener ma ukryty przepełnienie, więc chcę zobaczyć środek obrazu, ponieważ zwykle tam jest fokus.

Jacob Windsor
źródło
1
Czy zamierzone jest, aby obraz był wyświetlany w tym samym wierszu, co pierwsze łącze (artystyczne)?
Shoaib,
5
imgpodlegają, text-align: centerchyba displayże zostały zmodyfikowane.
Jared Farrish
4
jsfiddle.net/cEgRp - prostytext-align: center
Zoltan Toth
3
Jacob, czy możesz przynajmniej opublikować znaczniki, które widzi przeglądarka, a nie szablon z PHP? Również działająca jsfiddle.net zawsze pomaga.
Jared Farrish
2
Nie wspominając o moim komentarzu - nie zauważyłem, że jest imgon zawarty w a. Jestem głupi.
Shoaib,

Odpowiedzi:

834

Facet CSS sugeruje, co następuje:

Tłumaczenie, być może:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Oto moje rozwiązanie w: http://jsfiddle.net/marvo/3k3CC/2/

Marvo
źródło
10
Nie sądzę, żeby to był dobry pomysł, a także uważam, że niektóre zastrzeżenia margin: autozależą od tego, czy element zawierający ma określoną szerokość.
Jared Farrish
4
Ciągle doskonalę swoje umiejętności CSS, więc dziękuję za ciekawy punkt do nauki. Ale w tym przypadku używa stałej szerokości kontenera.
Marvo
1
Co dokładnie oznacza wyznaczona szerokość w tym kontekście? Zdecydowanie wydaje się, że jest to przydatna wiedza.
Shoaib,
1
Zobacz to skrzypce, które zrobiłem ; Nie jestem pewien, co myśleć. To, co sugerujesz, nic nie da, a imgmyślę, że i tak potrzebowałaby zdefiniowanej szerokości, aby uzyskać jakikolwiek efekt auto.
Jared Farrish
2
Nie wdrożyłeś rozwiązania, które przedstawiłem. Po drugie, otaczająca div ma szerokość 120px, która jest mniej więcej taka sama jak szerokość obrazu, przez co trudno jest sprawdzić, czy rzeczywiście centruje obraz. Oto moje rozwiązanie: jsfiddle.net/marvo/3k3CC/2
Marvo
88

CSS flexbox może to zrobić justify-content: centerna elemencie nadrzędnym obrazu. Aby zachować proporcje obrazu, dodaj align-self: flex-start;go.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Wynik:

Manoj Kumar
źródło
4
Doskonałe rozwiązanie, gdy przeglądarka obsługuje to, co robi moja. Można również użyć align-itemsdo wyśrodkowania w pionie. Różne rozwiązania marginesów nie działają dla mnie, ponieważ element, który ma być wyśrodkowany, nie ma atrybutów szerokości i wysokości.
Marc Rochkind
1
W moim przypadku div ma określony rozmiar (np. 50 pikseli), co spowoduje rozciągnięcie obrazu do 50 pikseli.
Maks.
1
@Max W takim przypadku możesz zastosować align-selfdo elementu obrazu takiego jak ten jsfiddle.net/3fgvkurd
Manoj Kumar
69

Właśnie znalazłem to rozwiązanie poniżej na stronie W3 CSS i odpowiedziało na mój problem.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Źródło: http://www.w3.org/Style/Examples/007/center.en.html

mk.hd
źródło
Używam max-width: 100%; max-height: 100%;do zmiany rozmiaru obrazu, jeśli ekran jest mniejszy niż obraz, ale w tym przypadku nie jest wyśrodkowany. Wszelkie sugestie dotyczące sposobu wyśrodkowania przy użyciu tych dwóch atrybutów
Alexey Strakh
18

To też by to zrobiło

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}
Mehmet Yaden
źródło
Miałeś na myśli text-align:center;i margin:0 5px;? Dodałem;
jagb
Średniki @jagb nie są wymagane dla ostatniej właściwości w bloku selektora.
TylerH
4
@TylerH To prawda, średniki nie są wymagane dla ostatniej właściwości w bloku selektora, ale zawsze jest oszczędniejsze, aby użyć średników. Co się stanie, jeśli napiszę plik CSS, inny programista edytuje mój plik później, dodaje trochę kodu (po wierszu z brakującym średnikiem linia, którą wcześniej napisałem w tym pliku CSS) i ich wysokość, szerokość lub inna deklaracja nie działa (lub jeszcze gorzej, nie zauważają, że to nie działa). Powiedziałbym, że bezpieczniej jest pozostawić średniki. Dlatego używam średników i nigdy nie pomijam średników.
jagb
@jagb Jeśli inny programista edytuje plik później, w razie potrzeby doda średniki lub będzie to ich problem z pisaniem kodu zawierającego błędy. Odpowiedź na twój początkowy komentarz jest nadal: „średniki w ostatnim wierszu w CSS są wyborem stylu”.
TylerH
Zgadzam się z jagb. Ta strona powinna promować dobre wybory stylu. Dobry styl nie pozostawia po sobie kodu, który łatwo można złamać. Umieszczenie średnika w każdej linii kosztuje około 1/10 sekundy, a debugowanie w celu znalezienia pojedynczego brakującego średnika może kosztować wiele godzin. Właśnie dlatego nalegają na to wielkie firmy technologiczne: Przewodnik po stylu Google HTML / CSS - przestaje
deklarować
14

Najlepszą rzeczą, jaką znalazłem (która wydaje się działać we wszystkich przeglądarkach) w celu wyśrodkowania obrazu lub dowolnego elementu w poziomie jest utworzenie klasy CSS i uwzględnienie następujących parametrów:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Następnie możesz zastosować utworzoną przez siebie klasę CSS do tagu w następujący sposób:

HTML

<img class="center" src="image.jpg" />

Możesz również wstawić CSS w swoich elementach, wykonując następujące czynności:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... ale nie polecałbym pisania CSS inline, ponieważ wtedy musisz wprowadzić wiele zmian we wszystkich tagach, używając centrującego kodu CSS, jeśli kiedykolwiek chcesz zmienić styl.

Kevin
źródło
wykonał zadanie, ale dla kompatybilności z przeglądarką będziesz musiał użyć innych form transformacji.
Jay Smoke
11

Tak właśnie skończyłem:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Co ograniczy wysokość obrazu do 600 pikseli i wyśrodkuje poziomo (lub zmniejszy rozmiar, jeśli szerokość rodzica jest mniejsza) do pojemnika rodzica, zachowując proporcje.

Cherno
źródło
8

Mam zamiar wyjść na kończynę i powiedzieć, że to, czego szukasz.

Zauważ, że moim zdaniem przypadkowo pominięto następujące pytanie (patrz komentarz):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Potrzebujesz więc:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Jared Farrish
źródło
Hmm ... Założę się, że to działa. Wyśrodkowałem OBRAZ w moim rozwiązaniu, ale widzę, jak pytanie można interpretować jako wyśrodkowanie div otaczającego obraz w innym div. Tak czy inaczej, to samo rozwiązanie.
Marvo
Żadne z tych rozwiązań nie działa w praktyce. Wypróbowałem oba rozwiązania, zanim to po prostu nie działało. Proszę odnieść się do edycji w pytaniu
Jacob Windsor
3

Aby wyśrodkować obraz w poziomie, działa to:

<p style="text-align:center"><img src=""></p>
kalariya parikshith
źródło
Tak, ale jeśli planujesz wyświetlać obraz jako blok, aby zapobiec nudnej białej przestrzeni pod nim, to już nie zadziała ...
Dr Fred
3

Dodaj to do swojego CSS:

#artiststhumbnail a img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Odwołując się do elementu potomnego, którym w tym przypadku jest obraz.

loxsat
źródło
2
jest to dobre, gdy nadal chcesz uzyskać dostęp do górnego marginesu, .. lepiej niż margines 0 auto
tallgirltaadaa
2

Umieść wyrównanie pikseli dla lewej i prawej strony:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
V-SHY
źródło
1

Umieść zdjęcie w środku newDiv. Ustaw szerokość zawierającego divtak samo jak obraz. Zastosuj margin: 0 auto;do newDiv. To powinno wyśrodkować divwnętrze pojemnika.

Set u
źródło
1

Użyj pozycjonowania. Poniższe działało dla mnie ... (wyśrodkowane w poziomie i w pionie)

Przy powiększeniu do środka obrazu (obraz wypełnia div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Bez powiększenia do środka obrazu (obraz nie wypełnia div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
ThomasAFink
źródło
1

możesz wyrównać zawartość za pomocą Flex Box z minimalnym kodem

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js link do skrzypiec https://jsfiddle.net/7un6ku2m/

Santosh Khalse
źródło
1

Wyśrodkuj obraz w div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

antylopa
źródło
1

Próbowałem na kilka sposobów. Ale ten sposób działa dla mnie idealnie

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
Ifwat Ibrahim
źródło
1

Reaktywny sposób wyśrodkowania obrazu może wyglądać następująco:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
Ali Safari
źródło
0

Jeśli musisz to zrobić bezpośrednio (na przykład przy użyciu pola wprowadzania),
oto szybki hack, który zadziałał dla mnie: otoczyć (w tym przypadku link do zdjęcia)
za divpomocąstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */
SherylHohman
źródło
0
##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
Siva Kaliyamoorthy
źródło
5
Witamy w Stackoverflow! Dodaj wyjaśnienie do swojej odpowiedzi.
Maximilian Peters
Jeśli chcemy naprawić konkretny <div> lub <section>Zarówno w pionie, jak iw poziomie środek strony dla wszystkich urządzeń, możesz po prostu użyć tego kodu stylu !!!!
Siva Kaliyamoorthy
Wygląda na to, że ta odpowiedź należy do innego pytania :)
Manoj Kumar
0

tak, taki kod działa dobrze

<div>
 <img>
</div>

ale dla przypomnienia styl obrazu

object-fit : *depend on u*

więc końcowy kod będzie podobny do przykładu

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Ostateczny wynik

Mark Sparrow
źródło
0

Użycie właściwości flex na kontenerze jest właściwą odpowiedzią na możliwość wyśrodkowania zarówno w pionie, jak iw poziomie.

Najważniejsza odpowiedź tutaj NIE działa na centrowanie elementu w pionie, tylko w poziomie.

Synaikido
źródło
OP wyraźnie poprosił o wyrównanie w poziomie.
Alvin Moyo
-1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>
KES NORKUS
źródło