একটি ব্লক এলিমেন্টকে (যেমন <div>) অনুভূমিকভাবে কেন্দ্রীভূত করতে, margin: auto; ব্যবহার করুন
এলিমেন্টের width সেট করলে এটি তার কন্টেইনারের প্রান্ত পর্যন্ত বিস্তৃত হওয়া থেকে বিরত থাকবে।
এলিমেন্টটি তখন নির্দিষ্ট প্রস্থ দখল করবে, এবং অবশিষ্ট জায়গা দুই মার্জিনের মধ্যে সমানভাবে ভাগ হবে:
এই div এলিমেন্টটি কেন্দ্রীভূত।
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}মনে রাখবেন: width প্রপার্টি সেট করা না থাকলে (বা 100% সেট করা থাকলে) সেন্টার অ্যালাইন করার কোনো প্রভাব নেই।
একটি এলিমেন্টের ভেতরের টেক্সট শুধু কেন্দ্রীভূত করতে, text-align: center; ব্যবহার করুন
এই টেক্সটটি কেন্দ্রীভূত।
.center {
text-align: center;
border: 3px solid green;
}টিপস: টেক্সট কীভাবে অ্যালাইন করবেন তার আরও উদাহরণের জন্য, CSS টেক্সট চ্যাপ্টারটি দেখুন।
একটি ইমেজ সেন্টার করতে, বাম ও ডান মার্জিন auto-এ সেট করুন এবং এটিকে একটি block এলিমেন্টে পরিণত করুন:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}এলিমেন্ট অ্যালাইন করার একটি পদ্ধতি হলো position: absolute; ব্যবহার করা:
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}মনে রাখবেন: Absolute পজিশন করা এলিমেন্ট স্বাভাবিক প্রবাহ থেকে সরিয়ে নেওয়া হয়, এবং এলিমেন্টের সাথে ওভারল্যাপ করতে পারে।
CSS-এ একটি এলিমেন্ট উল্লম্বভাবে কেন্দ্রীভূত করার অনেক উপায় আছে। একটি সহজ সমাধান হলো উপর ও নিচের padding ব্যবহার করা:
আমি উল্লম্বভাবে কেন্দ্রীভূত।
.center {
padding: 70px 0;
border: 3px solid green;
}উল্লম্ব এবং অনুভূমিক — দুই দিকেই সেন্টার করতে, padding এবং text-align: center ব্যবহার করুন:
আমি উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত।
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}আরেকটি কৌশল হলো height প্রপার্টির সমান একটি মানসহ line-height প্রপার্টি ব্যবহার করা।
আমি উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত।
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* টেক্সটে একাধিক লাইন থাকলে, নিচেরটি যোগ করুন: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}padding এবং line-height ব্যবহার করা সম্ভব না হলে, তৃতীয় সমাধান হলো পজিশনিং এবং transform প্রপার্টি ব্যবহার করা:
আমি উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত।
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}টিপস: আমাদের 2D Transforms চ্যাপ্টারে transform প্রপার্টি সম্পর্কে আরও জানবেন।