Wpis z mikrobloga

Prosta strona html tylko z jednym zdjęciem. Jak wycentrować w pionie te zdjęcie?
Albo jak wycentrować w pionie tabelkę z jedną komórką? :)

  • 7
  • Odpowiedz
@ixem: Można, ale to jest gorsza metoda. U Ciebie tak to wyglądać będzie 1 zdjęcie i nic więcej:

Plik index.html:

Document


Plik style.css w tym samym folderze co strona:

main{
display: flex;
justify-content: center;
}

Cała filozofia. Div nie jest tutaj niezbędny, tak samo jakbyś się uparł to możesz to zrobić w samym body, w końcu 1 zdjęcie to nawet nie można nazwać strona internetowa. Reszta to wygenerowany szablon z Emmeta,
  • Odpowiedz
@Lechu1777: Dzięki. Chodzi o to, żeby grafika na stronie na monitorze HD była na środku w pionie i tak samo była na środku na monitorze Full HD. Tak będzie? Mam lapka z HD i nie wiem jak to sprawdzić. Można w sposób pomniejszania Ctrl - ? Jest to sensowne? :)
  • Odpowiedz
@ixem: Otwórz swoją stronę (albo obojętnie jaką) kliknij prawym przyciskiem na stronie, wybierz z menu kontekstowego zbadaj, otworzy się duży panel z wieloma rzeczami, w Firefoxie przykładowo po prawej jego stronie jest wiele ikonek, jedna z tych ikonek nazywa się tryb responsywny, widać na screenie po prawej stronie wciśnięta ikonkę, to jest właśnie to co masz znaleźć.

https://imgur.com/a/DHTTFg2

Włączy Ci się takie okienko, które możesz sobie rozszerzać dowolnie łapiąc za krawędź
  • Odpowiedz
@ixem: A co do pytania to tak, flex ustawia na środku dynamicznie. O ile zdjęcie naturalnie mieści się w szerokości strony, inaczej trzeba by dodać dodatkowe parametry, żeby się zwężało jak brakuje miejsca itp.

To co chcesz osiągnąć zadziała też w prymitywny sposób dając do img:
margin-left: auto;
margin-right: auto;

czyli w CSS:
img{
display: flex;
margin-left: auto;
margin-right: auto;
}

zadziała do wszystkich img w pliku. Jak chcesz wydzielić do
  • Odpowiedz