{"id":66,"date":"2025-11-11T19:29:30","date_gmt":"2025-11-11T19:29:30","guid":{"rendered":"https:\/\/host555380.stronawcal.pl\/?p=66"},"modified":"2025-11-11T19:32:18","modified_gmt":"2025-11-11T19:32:18","slug":"jak-wycentrowac-diva","status":"publish","type":"post","link":"https:\/\/host555380.stronawcal.pl\/index.php\/2025\/11\/11\/jak-wycentrowac-diva\/","title":{"rendered":"Jak wycentrowa\u0107 diva?"},"content":{"rendered":"\n

Wy\u015brodkowanie div-a<\/h2>\n\n\n\n

1. margin: 0 auto;<\/strong><\/h3>\n\n\n\n

Tej opcji mo\u017cemy u\u017cy\u0107, je\u015bli element, kt\u00f3ry chcemy wy\u015brodkowa\u0107 jest elementem blokowym i posiada ustalon\u0105 szeroko\u015b\u0107<\/strong>. W ten spos\u00f3b wycentrujemy diva lub paragraf w poziomie<\/strong>.<\/p>\n\n\n\n

Stw\u00f3rzmy dwa div-y, z kt\u00f3rych jeden jest wi\u0119kszy i zawiera w sobie drugi, mniejszy. Oba wycentrujemy w pionie za pomoc\u0105 margin: 0 auto<\/em>;<\/p>\n\n\n\n

HTML:\n\n<body>\n    <div class=\"outside\">\n        <div class=\"inside\">\n        <\/div>\t\n        <p class=\"paragraph\"> Centered paragraph <\/p>\t\n    <\/div>\n<\/body>\n\nCSS:\n\n.outside {\n\twidth: 600px;\n\theight: 400px;\n\tborder: 2px solid black;\n\tmargin: 0 auto;\n}\n\n.inside {\n\twidth: 150px;\n\theight: 100px;\n\tbackground-color: red;\n\tmargin: 0 auto;\n}\n\n.paragraph {\n\twidth: 150px;\n\tmargin: 0 auto;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
2. Flexbox<\/strong><\/h3>\n\n\n\n
Za pomoc\u0105 flexboxa mo\u017cemy wycentowa\u0107 jednego lub kilka div-\u00f3w zar\u00f3wno w poziomie jak i w pionie. Wystarczy, \u017ce element \u2013 rodzic posiada\u0107 b\u0119dzie w\u0142a\u015bciwo\u015b\u0107 display: flex<\/em> i \u017ce ustawimy na nim odpowiednie zachowanie element\u00f3w \u2013 dzieci.<\/p>\n\n\n\n
HTML:\n\n<body>\n    <div class=\"outside\">\n        <div class=\"inside\">\n        <\/div>\t\t\n    <\/div>\n<\/body>\n\nCSS:\n\n.outside {\n\twidth: 600px;\n\theight: 400px;\n\tborder: 2px solid black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.inside {\n\twidth: 150px;\n\theight: 100px;\n\tbackground-color: red;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
3. Pozycja Absolutna i CSS Transform<\/strong><\/h3>\n\n\n\n
To powszechna technika, kt\u00f3ra s\u0142u\u017cy do centrowania elemet\u00f3w pozycjonowanych absolutnie.<\/p>\n\n\n\n
HTML:\n\n<body>\n    <div class=\"outside\">\n        <div class=\"inside\"> <\/div>\t\t\n    <\/div>\n<\/body>\n\nCSS:\n\n.outside {\n\twidth: 600px;\n\theight: 400px;\n\tborder: 2px solid black;\n\tposition: relative\n}\n\n.inside {\n\twidth: 150px;\n\theight: 100px;\n\tbackground-color: red;\n\n\tposition: absolute;  \n        top: 50%;  \n        left: 50%;  \n        transform: translate(-50%, -50%);\n}<\/code><\/pre>\n\n\n\n
Efekt jest taki sam jak przy flexboxie:<\/p>\n\n\n\n
\"How<\/figure>\n\n\n\n
4. Position: absolute<\/strong><\/h3>\n\n\n\n
W tym przypadku marginesy ustawione na auto<\/em> w po\u0142\u0105czeniu z warto\u015bciami zero dla zestaw\u00f3w lewy i prawy lub g\u00f3rny i dolny wy\u015brodkuj\u0105 div-a bezwzgl\u0119dnie w elemencie-rodzicu.<\/p>\n\n\n\n
HTML:\n\n<body>\n    <div class=\"outside\">\n        <div class=\"inside\"> <\/div>\t\t\n    <\/div>\n<\/body>\n\nCSS:\n\n.outside {\n\twidth: 600px;\n\theight: 400px;\n\tborder: 2px solid black;\n\tmargin: 0 auto;\n\tposition: relative;  \n}\n\n.inside {\n\twidth: 150px;\n\theight: 100px;\n\tbackground-color: red;\n\n\tposition: absolute; \n\tmargin: auto;  \n\ttop: 0;  \n\tright: 0;  \n\tbottom: 0;  \n\tleft: 0;\n}<\/code><\/pre>\n\n\n\n
\"How<\/figure>\n\n\n\n
Wy\u015brodkowanie tekstu<\/h2>\n\n\n\n
1. Text-align<\/strong><\/h3>\n\n\n\n
Je\u015bli chodzi o wy\u015brodkowanie tekstu w poziomie<\/strong>, jedn\u0105 z najbardziej znanych regu\u0142 jest u\u017cycie w\u0142a\u015bciwo\u015bci text-align.<\/p>\n\n\n\n
HTML: \n\n<p> Center this text <\/p>\n\nCSS:\n\np {\n    text-align: center;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
2. Line-height<\/strong><\/h3>\n\n\n\n
Je\u015bli chcesz wy\u015brodkowa\u0107 text w pionie<\/strong>, mo\u017cesz u\u017cy\u0107 regu\u0142y line-height i ustawi\u0107 wysoko\u015b\u0107 lini tekstu diva r\u00f3wn\u0105 wysoko\u015bci tego diva.<\/p>\n\n\n\n
HTML: \n\n<div class=\"div\">\n     <p class=\"paragraph\"> Center this paragraph <\/p> \n<\/div>\n\nCSS:\n\n.div {\n\twidth: 600px;\n\theight: 400px;\n\tborder: 2px solid black;\n\tline-height: 400px;\n}\n\n.paragraph {\n\ttext-align: center;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
3. Display: table<\/strong><\/h3>\n\n\n\n
Ta technika pozwala na dodanie zawarto\u015bci do elementu HTML i wy\u015brodkowanie jej zar\u00f3wno w poziomie, jak i w pionie<\/strong>, bez martwienia si\u0119 o wysoko\u015b\u0107 lub szeroko\u015b\u0107.<\/p>\n\n\n\n
Musisz tylko ustawi\u0107 display: table<\/em> w elemencie-rodzicu i display: table-cell<\/em> w elemencie \u2013 dziecku, a nast\u0119pnie ustawi\u0107 wyr\u00f3wnanie tekstu w pionie i poziomie:<\/p>\n\n\n\n
HTML: \n\n<div class=\"div\">\n     <p class=\"paragraph\"> Center this paragraph <\/p> \n<\/div>\n\nCSS:\n\n.div {\n\twidth: 600px;\n\theight: 400px;\n\tborder: 2px solid black;\n\tdisplay: table;\n}\n\n.paragraph {\n\tdisplay: table-cell;\n\ttext-align: center;\n\tvertical-align: middle;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Wy\u015brodkowanie div-a 1. margin: 0 auto; Tej opcji mo\u017cemy u\u017cy\u0107, je\u015bli element, kt\u00f3ry chcemy wy\u015brodkowa\u0107 jest elementem blokowym i posiada ustalon\u0105 szeroko\u015b\u0107. W ten spos\u00f3b wycentrujemy diva lub paragraf w poziomie. Stw\u00f3rzmy dwa div-y, z kt\u00f3rych jeden jest wi\u0119kszy i zawiera w sobie drugi, mniejszy. Oba wycentrujemy w pionie za pomoc\u0105 margin: 0 auto; 2. Flexbox Za pomoc\u0105 […]<\/p>\n","protected":false},"author":1,"featured_media":68,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-66","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aplikacje-internetowe"],"_links":{"self":[{"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":1,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/posts\/66\/revisions\/67"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/media\/68"}],"wp:attachment":[{"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/host555380.stronawcal.pl\/index.php\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}