CSS এ alignment set করাটা একটু tricky মনে হতে পারে। 🥲 🥲 For example: কোনও block level element কে (suppose, h1) center এ আনার জন্য text-align : center ব্যবহার করতে পারবেন, কিন্তু যদি সেই block element এর সাথে একটা fixed width add করে দেন তখন কি কাজ করবে এই text-align: center? না। ❌ ❌ Block level element কে width সহ center করতে ব্যবহার করতে হবে margin : 0 auto । আর যখন vertically and horizontally একসাথে center করতে যাবেন, তখন মনে হতে পারে সব যেন জগাখিচুড়ী লেগে গেল। 🤧😵😵
Am I telling the truth? Oh!
So, this blog is for you …
এখানে আজকে জানব ৩ টা জিনিসঃ [ এগুলো ছাড়াও আরো অনেক ভাবে করা যায় centering ]
Part -1: কোনও standalone text / image / element কে horizontally centering করা ( Horizontally centering a text / image / element )
Part -2: কোনও div / element এর ভেতরে কোনও text / image থাকলে সেটাকে vertically / horizontally & vertically + horizontally centering করা ( Centering text & image vertically / horizontally & vertically + horizontally inside a div )
Part -3: কোনও standalone text / image / element কে horizontally + vertically centering করা view height & view width এর সাপেক্ষে ( Centering any standalone text / image / element in horizontally + vertically centering relative to view height & view width )
=====================================
Part -1 : Horizontally centering a text / image / element:
======================================
1. Center align text:
<div class="center">
<p>This is Chayti</p>
</div>
<style>
.center {
text-align: center;
border: 4px solid purple;
}
</style>
2. Center align element:
.center {
margin: auto;
width: 50%;
border: 4px solid purple;
padding: 10px;
}
3. Center an image:
<img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
img {
display: block;
margin-left: auto;
margin-right: auto;
}
======================================
Part -2: Centering text & image vertically / horizontally & vertically + horizontally inside a div:
======================================
CSS এ কোনও element কে কয়েকভাবে center align করতে পারেনঃ
- Using CSS position property
- Using Flexbox
- Using Grid
1. Using CSS position property:
Css position properties are: relative, absolute, fixed, and static (the default), sticky. আর এগুলো সেট করার জন্য element এর মধ্যে এই ৪ টা Property ( top, right, bottom, and left ) দেওয়া যায়। সেক্ষেত্রে relative & absolute এর combination করে আপনি অনেক কিছুই করতে পারেন।
Centering text using CSS positioningঃ
<div class="container">
<div class="centered-element">
<p>Hello, This is Chayti</p>
</div>
</div>
.container {
position: relative;
height: 350px;
border: 3px solid #006100;
}
.centered-element {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
এখানে text এর centering টা box ( relative ) এর সাপেক্ষে হয়েছে এবং top : 50% ব্যবহার করায় vertically center হয়েছে।
For both horizontal & vertical center:
.centered-element {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Centering an image using CSS positioning:
<div class="container">
<div class="centered-element">
<img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
</div>
</div>
.container {
position: relative;
height: 350px;
border: 4px solid purple;
}
.centered-element {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Now do the image horizontally centering by yourself !!!
2. Centering Element with Flexbox:
Centering vertically text & image:
.container {
display: flex;
align-items: center;
height: 350px;
border: 4px solid purple;
}
Center text both vertically & horizontally:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 350px;
border: 4px solid purple;
}
Center image both vertically & horizontally:
<div class="container">
<img src="images/Logo-PH1.png" alt="PHero" style="width:10%">
</div>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 350px;
border: 4px solid purple;
}
======================================
Part -3: Centering any standalone text / image / element in horizontally + vertically centering relative to view height & view width:
======================================
1. Centering a text:
<h1 class="content" style="color:tomato">Hello!!! This is me !! Chayti !</h1>
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
2. Centering an image:
<div class="content">
<img src="images/Logo-PH1.png" alt="PHero" style="width: 20%;">
</div>
.content {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
3. Centering an element:
<div class="content">
<div style="background-color:tomato; width: 200px; height: 200px;">
</div>
</div>
.content {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
*Bass !!! অনেকটুক হল… একবারে না বুঝলে কয়েকবার পড়ে তারপর বুঝার চেষ্টা করুন। নিজে নিজে blog পড়ার সাথে সাথে code গুলোও করুন। তারপর আস্তে আস্তে concept clear হবে। *
~Let’s_code_your_career
~Happy_Coding!!!
Top comments (19)
One more for centering both horizontally and vertically -
.centered{
height:100vh;//You can put any other value as height
display:grid;
place-items:center;
}
Very helpful.
very helpful...!❤
Thanks a lot.
very helpful
thanks its very helpful
thanks apu
Thanks a lot for this informative article, which we are bound to easily understand.
আমার মাথা এখনো ঘুরতেছে। তবে হেল্পফুল এই পোস্টটি। প্রয়োজনের সময় কিভাবে খুজে পাবো জানিনা। থ্যাংক ইউ ফর শেয়ার উইথ আস।
Bookmark it.
Thanks a ton for make it easy