CSS দিয়ে লেআউট সেন্টার অ্যালাইন করা (২ পদ্ধতি)

CSS দিয়ে ওয়েবপেজ লেআউট হরিজন্টালি সেন্টার অ্যালাইন করার দুটি পদ্ধতি শিখুন।

পদ্ধতি ১: Margin Auto (ক্লাসিক)

<article> এলিমেন্টকে হরিজন্টালি সেন্টার করতে:

<article> 
  <h1>Title for your article</h1> 
  <p>Lorem ipsum...</p> 
</article>

article { max-width: 640px; margin-left: auto; margin-right: auto; }

max-width আবশ্যক—না হলে টেক্সট পেজের লেফ্ট থেকে রাইট পর্যন্ত ছড়িয়ে যাবে।

পদ্ধতি ২: Flexbox (আধুনিক)

<article> কে <main> দিয়ে র‍্যাপ করুন:

<main> 
  <article> ... </article> 
</main>

main { display: flex; flex-direction: column; justify-content: center; align-items: center; } 
article { max-width: 640px; }

এই পদ্ধতিটি margin: auto-এর মতোই কাজ করে।