কেন্দ্রে পুরো এইচটিএমএল বডি সারিবদ্ধ করবেন?

Question 1

আমি কীভাবে পুরো এইচটিএমএল শরীরের কেন্দ্রে প্রান্তিককরণ করব?

Question 2

আমি কেবল এই পুরানো পোস্টে হোঁচট খেয়েছি, এবং আমি নিশ্চিত যে ইউজার ০১ তার উত্তরটি অনেক আগে থেকেই খুঁজে পেয়েছেন, আমি পেয়েছি বর্তমান উত্তরগুলি বেশ কার্যকর হয় না। অন্যদের দেওয়া তথ্য ব্যবহার করে কিছুটা সময় ঘুরে দেখার পরে আমি একটি সমাধান পেয়েছি যা আইই, ফায়ারফক্স এবং ক্রোমে কাজ করে। সিএসএসে:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

এটি প্রায়শই অ্যাবার্নিয়ারের উত্তরের মতো, তবে আমি দেখতে পেয়েছি যে প্রস্থ সহ কেন্দ্রিকতা ভেঙে যাবে, যেমন অটো মার্জিন বাদ যাবে। আমি আশা করি যে এই থ্রেডে হোঁচট খায় যে কেউ আমার উত্তরকে সহায়ক বলে মনে করবে।

নোট: ফেরত html, body { height: 100%; }শুধুমাত্র অনুভূমিকভাবে কেন্দ্রে।

Question 3

আপনি চেষ্টা করতে পারেন:

body{ margin:0 auto; }

Question 4

সম্পাদনা

ফ্লেক্সবক্সের সাথে আজকের মতো, আপনি করতে পারেন

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

পূর্ববর্তী উত্তর

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Question 5

আমার যদি সিএসএসের প্রতি শ্রদ্ধার সাথে শেয়ার করতে আমার কাছে একটি জিনিস থাকে তবে এটি আমার পক্ষে দু'দিক অক্ষরেদিকের কেন্দ্রীভূত করার উপায় !!!

এই পদ্ধতির সুবিধা :

লোকেরা আসলে ব্যবহার করে এমন ব্রাউজারগুলির সাথে সম্পূর্ণ সামঞ্জস্য
কোনও টেবিলের প্রয়োজন নেই
তাদের পিতামাতার অভ্যন্তরে অন্য কোনও উপাদান কেন্দ্রীভূত করার জন্য উচ্চ পুনরায় ব্যবহারযোগ্য
গতিশীল (পরিবর্তনশীল) মাত্রা সহ পিতামাতাদের এবং শিশুদের একত্রীকরণ!

আমি সর্বদা ২ টি ক্লাস ব্যবহার করে এটি করি: একটি প্যারেন্ট উপাদান নির্দিষ্ট করে, যার বিষয়বস্তু কেন্দ্রিক হবে ( .centered-wrapper) এবং দ্বিতীয়টি পিতামাতার কোন সন্তানের কেন্দ্রিক হবে তা নির্দিষ্ট করে ( .centered-content)। এই ২ য় শ্রেণীর ক্ষেত্রে পিতামাতার একাধিক বাচ্চা রয়েছে সে ক্ষেত্রে দরকারী তবে কেবলমাত্র 1 টি কেন্দ্রিক করা দরকার)। এই ক্ষেত্রে, bodyহবে .centered-wrapper, এবং একটি অভ্যন্তর divহবে .centered-content।

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

কেঁদ্রীকরণ ধারণা এখন করতে হবে .centered-contentএকটি inline-block। এটি সহজেই মাধ্যমে অনুভূমিক কেন্দ্রীকরণকে সহজতর করবে text-align: center;এবং আপনি যেমন দেখতে পাবে উল্লম্ব কেন্দ্রীকরণেরও অনুমতি দেয়।

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

এটি আপনাকে কোনও পিতা-মাতার অভ্যন্তরে যে কোনও শিশুকে কেন্দ্র করে রাখার জন্য 2 টি সত্যই পুনরায় ব্যবহারযোগ্য ক্লাস দেয়! শুধু .centered-wrapperএবং .centered-contentক্লাস যুক্ত করুন।

সুতরাং, যে :beforeউপাদান সঙ্গে কি ? এটি সুবিধার্থ করে vertical-align: middle;এবং প্রয়োজনীয় কারণ উল্লম্ব সারিবদ্ধতা পিতামাতার উচ্চতার সাথে তুলনামূলক নয় - উল্লম্ব সারিবদ্ধতা দীর্ঘতম ভাইবোনের উচ্চতার সাথে সম্পর্কিত !!! । সুতরাং, এমন এক ভাইবোন রয়েছে যার উচ্চতা পিতামাতার উচ্চতা (100% উচ্চতা, 0 টি প্রস্থ এটি অদৃশ্য করার জন্য) রয়েছে তা নিশ্চিত করে আমরা জানি যে উল্লম্ব সারিবদ্ধতা পিতামাতার উচ্চতার ক্ষেত্রে সম্মানের সাথে থাকবে।

একটি শেষ কথা: আপনার htmlএবং bodyট্যাগগুলি উইন্ডোর আকারের তা নিশ্চিত করতে হবে যাতে ব্রাউজারে কেন্দ্রীকরণ করার মতো সেগুলিকে কেন্দ্র করে রাখা একই হয়!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

ফিডাল: https://jsfiddle.net/gershy/g121g72a/

Question 6

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Question 7

আমি ফ্লেক্সবক্স চালু করি html। একটি দুর্দান্ত প্রভাবের জন্য, আপনি ব্রাউজারগুলির ক্রোমের সাথে মিল রাখতে পারেন যাতে আপনার পৃষ্ঠার সর্বাধিকের চেয়ে বড় আকারের স্ক্রিনে আপনার সামগ্রী ফ্রেম করতে পারে। আমি দেখতে পাই যে #eeeeeeখুব ভাল মেলে। আপনি একটি দুর্দান্ত ফ্লোট এফেক্টের জন্য একটি বাক্সের ছায়া যুক্ত করতে পারেন।

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

চিত্র / ডেটা সৌজন্যে স্ট্যাটকাউন্টার

Question 8

শুধু লেখো

<body>
   <center>
            *Your Code Here*
   </center></body>

Question 9

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

যে কোনও সিএসএস প্রয়োগ করার আগে কেবল এই স্টাইলটি প্রয়োগ করুন। আপনি আপনার প্রয়োজন অনুযায়ী প্রস্থ পরিবর্তন করতে পারেন।

Question 10

এটা চেষ্টা কর

body {
max-width: max-content;
margin: auto;
}