06.01.2016 o 9:20

Tym razem chciałbym pokazać wam jak w prosty sposób wyśrodkować DIV-a nie tylko w poziomie, ale i w pionie.

Głównie jest to przydatny sposób, gdy robimy jakąś stronę i chcemy, aby jej główna treść zawsze była na środku.

Jak wiadomo, samo margin: 0 auto; wyśrodkuje w poziomie, ale gdy damy margin: auto; to nie wyśrodkuje w pionie i poziomie ponieważ brakuje dodatkowych atrybutów. Do tego potrzebna jest pozycja absolutna, odległości od każdych krawędzi na zero i najważniejsze bez tego nie zadziała wyśrodkowanie. Czyli szerokość oraz wysokość DIV-a, który chcemy wyśrodkować.

Tworzymy sobie jakiś DIV, np z ID = Center. Następnie w stylach CSS wpisujemy parametry o który przed chwilą pisałem.

Minimalne parametry jakie powinien posiadać styl CSS tego DIV-a są następujące:

#Center {
    width: 500px;
    height: 300px;
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

W tym samym przykładzie można zobaczyć wyśrodkowanie tekstu w akapicie oznaczonym jako <p>.

Jak już wiecie jak działa wyśrodkowanie DIV-a, to powinniście się domyśleć, że podobnie jest w przypadku wyśrodkowania tekstu w pionie.

Oczywiście chodzi tu o wymiary wysokości i szerokości. Do tego dodajemy wyśrodkowanie tekstu w poziomie i pionie. Z poziomem nie ma nikt problemu, ale zabawa zaczyna się gdy chcemy wyśrodkować w pionie. Jest na to prosty sposób. Wystarczy dodać jeszcze jeden parametr.

Jak wiecie przy tworzeniu tabelek, środkuje nam zawartość w pionie i czasem nas to denerwuje. Podczas wyśrodkowania w DIV-ie czy akapicie <p> trzeba zastosować podobną taktykę. Czyli musimy w stylu CSS poinformować, że ten konkretny blok lub akapit ma być traktowany jak komórka w tabeli.

Do określenia tego służy parametr display: table-cell; Oprócz niego oczywiście musimy zaznaczyć, że chcemy wyśrodkować tekst w pionie. Służy nam do tego vertical-align: middle;

Przykładowy minimalny kod wyśrodkowania tekstu w akapicie <p> w pionie i poziomie: