{"id":574,"date":"2023-12-29T13:45:49","date_gmt":"2023-12-29T10:45:49","slug":"bir-div-en-kolay-nasil-ortalanir","link":"https:\/\/sipa.agency\/tr\/blog\/bir-div-en-kolay-nasil-ortalanir\/","title":{"rendered":"Bir DIV en kolay nas\u0131l ortalan\u0131r?"},"content":{"rendered":"\n

Geli\u015ftiricilerin can\u0131n\u0131 en \u00e7ok s\u0131kan sorunla kar\u015f\u0131n\u0131zday\u0131z. Bir DIV ya da ba\u015fka bir nesne sayfaya ya da bulundu\u011fu alana nas\u0131l ortalan\u0131r? <\/strong>\ud83e\uddd0<\/p>\n\n\n\n

Bunu yapman\u0131n birka\u00e7 yolu var; geleneksel y\u00f6ntemle ve yeni standartlara uygun y\u00f6ntemlerle ortalama \u00f6rnekleri sunaca\u011f\u0131z. Tabii ki SIPA’n\u0131n “Az kod \u00e7ok i\u015f”<\/strong> kural\u0131na uygun bir \u015fekilde. \ud83d\ude0e<\/p>\n\n\n\n

Haydi ba\u015flayal\u0131m. \ud83d\udd25<\/p>\n\n\n\n

1. Geleneksel Y\u00f6ntem (Tablo G\u00f6r\u00fcn\u00fcm\u00fc)<\/h2>\n\n\n\n

HTML:<\/h3>\n\n\n
\n<div class="centered">\n    <div class="inner">\n        <div class="content"> \n            <h1>This is the centered DIV<\/h1>\n            <p>Centered method is TABLE | TABLE-CELL views.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
CSS:<\/h3>\n\n\n
\n.centered {\n    display: table;\n    width: 100%;\n    height: 100vh; \/* set your height *\/\n}\n.centered > .inner {\n    display: table-cell;\n    width: 100%;\n    height: 100%;\n    vertical-align: middle;\n}\n.centered > .inner > .content {\n    width: auto;\n    height: auto;\n    margin: 0 auto;\n    max-width: 35%; \/* not required *\/\n    padding: 20px; \/* not required *\/\n    background-color: #ccc; \/* not required *\/\n}\n<\/pre><\/div>\n\n\n
2. Yenilik\u00e7i Y\u00f6ntem (Flex G\u00f6r\u00fcn\u00fcm\u00fc)<\/h2>\n\n\n\n
Bu y\u00f6ntemle daha az kod yazd\u0131\u011f\u0131m\u0131z\u0131 g\u00f6receksiniz. Kodlaman\u0131n ana felsefesi bu zaten: Daha az kod, daha az veri aktar\u0131m\u0131, daha h\u0131zl\u0131 uygulamalar.<\/strong><\/p>\n\n\n\n
HTML:<\/h3>\n\n\n
\n<div class="centered">\n    <div class="content"> \n        <h1>This is the centered DIV<\/h1>\n        <p>Centered method is FLEX view.<\/p>\n    <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
CSS:<\/h3>\n\n\n
\n.centered {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100vh; \/* not required *\/\n}\n.centered > .content {\n    max-width: 35%; \/* not required *\/\n    padding: 20px; \/* not required *\/\n    background-color: #ccc; \/* not required *\/\n}\n<\/pre><\/div>\n\n\n
3. SIPA Y\u00f6ntemi (Fixed\/Relative & Absolute G\u00f6r\u00fcn\u00fcm\u00fc)<\/h2>\n\n\n\n
Bu y\u00f6ntem daha \u00e7ok popup pencereler i\u00e7in tercih edilmektedir. Hem RELATIVE hem FIXED nesneler i\u00e7inde ABSOLUTE nesneler kullanarak ortalama yapabiliriz. <\/p>\n\n\n\n
Bu y\u00f6ntemi kullanarak yazd\u0131\u011f\u0131m\u0131z Flex CSS Popup <\/strong>kodlar\u0131n\u0131 \u015furadan inceleyebilir ve indirebilirsiniz:
https:\/\/sipa.agency\/flex-css-popup\/<\/a><\/p>\n\n\n\n
HTML:<\/h3>\n\n\n
\n<div class="centered">\n    <div class="content"> \n        <h1>This is the centered DIV<\/h1>\n        <p>Centered method by SIPA :).<\/p>\n    <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
CSS:<\/h3>\n\n\n
\n.centered {\n    position: relative; \/* or fixed *\/\n    z-index: 1;\n    height: 100vh; \/* not required *\/\n}\n.centered > .content {\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n    margin:auto;\n    width: max-content;\n    height: max-content;\n    padding: 20px; \/* not required *\/\n    background-color: #ccc; \/* not required *\/\n}\n<\/pre><\/div>"},"parent":519,"menu_order":0,"comment_status":"closed","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"T\u00fcm cihazlarda sorunsuz g\u00f6r\u00fcnt\u00fcleyebilece\u011fiz bir CSS Popup kodlamas\u0131 yapt\u0131k. Sayfaya yerle\u015fme a\u015famas\u0131nda herhangi bir Javascript koduna ihtiya\u00e7 duymuyor. Odak noktas\u0131n\u0131 istedi\u011finiz bir pozisyonda tutabilece\u011finiz","_seopress_robots_index":"","footnotes":""},"class_list":["post-574","page","type-page","status-publish","has-post-thumbnail","hentry","entry"],"page_excerpt":"Geli\u015ftiricilerin can\u0131n\u0131 en \u00e7ok s\u0131kan sorunla kar\u015f\u0131n\u0131zday\u0131z. Bir DIV ya da ba\u015fka bir nesne sayfaya ya da bulundu\u011fu alana nas\u0131l ortalan\u0131r? \ud83e\uddd0 \u00dc\u00e7 farkl\u0131 y\u00f6ntemle g\u00f6stermek istiyoruz. ","acf":[],"fimg_url":"https:\/\/sipa.agency\/wp-content\/uploads\/2023\/12\/how-to-center-a-div.jpg","_links":{"self":[{"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/pages\/574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/comments?post=574"}],"version-history":[{"count":18,"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/pages\/574\/revisions"}],"predecessor-version":[{"id":602,"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/pages\/574\/revisions\/602"}],"up":[{"embeddable":true,"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/pages\/519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/media\/575"}],"wp:attachment":[{"href":"https:\/\/sipa.agency\/tr\/wp-json\/wp\/v2\/media?parent=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}