Forum PCLab.pl: css jak wyśrodkować tekst w DIVach? - Forum PCLab.pl

Skocz do zawartości

Ze względu na obowiązującą ciszę wyborczą funkcja komentowania została wyłączona do dn. 2019-05-26 godz. 21:00.

Otwarty

Ikona Najnowsze pliki

Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

css jak wyśrodkować tekst w DIVach? vertical-align: middle; Oceń temat: -----

#1 Użytkownik jest niedostępny   micesz229 

  • Dyskutant
  • PipPip
  • Grupa: Forumowicze
  • Postów: 19
  • Dołączył: Pt, 01 Mar 19

Napisany 13 Maj 2019 - 11:53

Witam

jak zrobić?
vertical-align: middle;
tak aby cały text we wszystkich divach
<p>text</p>
był po środku

Dodaj obrazek


Gdy dałem tak to działa...
p {
       text-align: center;
       vertical-align:middle;
     /*  padding: 1px 1px 1px 1px;   /* top/right/bottom/left */
       margin-left: auto;
    margin-right: auto;
       position: relative;
       top: 50%;
       transform: translate(0, -50%);
    

    }

Ten post był edytowany przez micesz229 dnia: 13 Maj 2019 - 12:11


#2 Użytkownik jest niedostępny   kretowicz 

  • Gaduła
  • PipPipPip
  • Grupa: Forumowicze
  • Postów: 232
  • Dołączył: So, 14 Lip 12

Napisany 14 Maj 2019 - 08:48

Np. https://vanseodesign...ical-centering/

Tego jest tyle, że już w tysiącach można liczyć. Szukałeś w google?

#3 Użytkownik jest niedostępny   maxpower 

  • ..........
  • PipPipPipPipPip
  • Grupa: Forumowicze
  • Postów: 1542
  • Dołączył: Nd, 23 Sie 09

Napisany 14 Maj 2019 - 21:50

display:flex


https://css-tricks.c...ide-to-flexbox/

link od @kretowicz to przestarzałe metody

#4 Użytkownik jest niedostępny   Snicers 

  • Orator
  • PipPipPipPip
  • Grupa: Forumowicze
  • Postów: 547
  • Dołączył: So, 17 Mar 12

Napisany 17 Maj 2019 - 12:00

A więc tak, sposobów na wyrównanie elementu rodzica jest kilka ale wydaję mi się że najłatwiejszym do opanowania jest użycie po prostu flexa.

Sposób # 1

display: flex;
justify-content: center;
align-items: center; - to spowoduję ze każdy element w rodzicu będzie wyśrodkowany na osi y więc możesz też dać bezpośrednio na element który chcesz wyśrodkować => align-self: center;

Sposób # 2

position: relative; <= rodzic elementu
position: absolute; <= dziecko
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Sposób # 3

line-height: wysokość elementu rodzica :)

Moim zdaniem te sposoby, które wymieniłem są najłatwiejsze do ogarnięcia. Jak czegoś nie wiesz to pytaj :D

Ten post był edytowany przez Snicers dnia: 17 Maj 2019 - 12:00


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych