Wyśrodkowywanie ikonek fontello

pytanie zadane 29 grudnia 2019 w HTML i CSS przez Jule czka Nowicjusz (160 p.)

Cześć! Piszę już tutaj chyba z 3 raz, ale co tam! Robię stronę na podstawie filmu "Kurs html odc.3". Napotkałam pewien mały problem, ponieważ chcę wyśrodkować ikonki w kolorowych płytkach. Już wam wysyłam sekwencje.

W pliku html:

<div class="square">
  <div class="tile1">
  <i class="icon-user-pair"></i><br />Queen
  </div>

W pliku css:

.tile1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #008080;
    float: left;
    text-align: center;
}

W pliku fontello.css:

.icon-user-pair:before { content: '\e804';font-size: 76px; margin-top: 20px; } /* '' */

Obrazek nie jest wyśrodkowany, tylko jest bardziej z prawej strony. Co robić?

2 odpowiedzi

odpowiedź 29 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)

A nie myślałaś żeby użyć sobie tu flexa? Dla contenera daj wtedy display: flex i justify-content: center, a dla elementu który ma być wyśrodkowany dajesz align-self: center.

komentarz 2 stycznia 2020 przez Eimens Maniak (69,240 p.)

Na jego poziomie zaawansowania nie dobierałbym się do flexa bo kompletnie mu to się wszystko pomiesza. Nich stopniowo zacznie poznawać właściwości CSS. Potem przyjdzie czas na Flex'a.

komentarz 2 stycznia 2020 przez Tomek Sochacki Ekspert (227,490 p.)

nie przesadzaj, masz kompletnie złe podejście do programowania - to technologię powinno się dobierać do problemu, a nie usilnie najpierw technoogię i potem myśleć, jak ją dostosować do danej sytuacji...

W moim zespole też najpierw jest zawsze dyskusja dokładnie nad problemem, rozbicie go na małe elementy i dopiero na koniec dobiera się technologię. Czasami np. okazuje się, że początkowe jakieś pomysły technologicznie nie są najlepsze, co dotyczy też czasami nawet wzięcia innego niż początkowo myślimy frameworka itp itd.

I powiem Ci z doświadczenia, że takie podejście sprawdza się bardzo dobrze. A w tym przypadku to wydaje mi się, że w necie jest milion dobrych materiałów o flex z gotowymi przykładami i opisami więc niezbyt widzę sens unikania tego?

Warto czasem spojrzeć na sprawy nieco inaczej. Ja np. przez długi czas byłem zwolennikiem aby w JS pisać klasowo, wyniosłem to z Angulara, pierwsze projekty w React też robiłem na komponentach klasowych. Ale w pewnym projekcie okazało się, że można by użyć sporo gotowych hooków z innych tematów no więc postanowiliśmy po prostu przejść na hooki i functional components... wystarczy wejść w dokumentację i poczytać, co za problem?

Na jego poziomie zaawansowania

a co za różnica jak długo kolega już programuje? W tym fachu cały czas musisz iść do przodu i się uczyć, taka branża... a wg mnie czasami lepiej poświęcić 2-3h na poczytanie dokumentacji jakiegoś rozwiązania które może ułatwić dalszą pracę niż usilnie brnąć w swoje, jedyne słuszne wersje :)

odpowiedź 2 stycznia 2020 przez Eimens Maniak (69,240 p.)

Cześć,

kod wygląda ok. Patrzyłem i mi normalnie środkuje z tymi właściwościami. (link). Spróbuj odświeżyć stronę Ctrl + Shift + R i zobacz co się stanie. Ewentualnie naucz się korzystać z DevTools Ctrl + Shift + J i tam na żywo sprawdzaj, czy wgrało wszystkie właściwości, które masz w pliku CSS. Czasami bywa tak że przeglądarka nie odświeża wszystkich zasobów po wciśnięciu F5.

Ogarnij DevTools i zerknij też FontAwesome (link).

Daj znać co i jak :)