DEV Community

Cover image for Hack the ways to center align any text / image / element in CSS
Chayti
Chayti

Posted on • Updated on

Hack the ways to center align any text / image / element in CSS

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>
Enter fullscreen mode Exit fullscreen mode
<style>
.center {
  text-align: center;
  border: 4px solid purple;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Image description

2. Center align element:

.center {
    margin: auto;
    width: 50%;
    border: 4px solid purple;
    padding: 10px;
  }

Enter fullscreen mode Exit fullscreen mode

Image description

3. Center an image:

<img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
Enter fullscreen mode Exit fullscreen mode
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Enter fullscreen mode Exit fullscreen mode

Image description

======================================

Part -2: Centering text & image vertically / horizontally & vertically + horizontally inside a div:

======================================

CSS এ কোনও element কে কয়েকভাবে center align করতে পারেনঃ

  1. Using CSS position property
  2. Using Flexbox
  3. 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>

Enter fullscreen mode Exit fullscreen mode
.container {
    position: relative;
    height: 350px;
    border: 3px solid #006100;
  }

  .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

Enter fullscreen mode Exit fullscreen mode

Image description

এখানে 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%);
  }

Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode
.container {
    position: relative;
    height: 350px;
    border: 4px solid purple;
  }

  .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

Enter fullscreen mode Exit fullscreen mode

Image description

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; 
}
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Center text both vertically & horizontally:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}
Enter fullscreen mode Exit fullscreen mode

Image description

Center image both vertically & horizontally:

 <div class="container">
  <img src="images/Logo-PH1.png" alt="PHero" style="width:10%">
    </div>
Enter fullscreen mode Exit fullscreen mode
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}
Enter fullscreen mode Exit fullscreen mode

Image description

======================================

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>

Enter fullscreen mode Exit fullscreen mode
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

2. Centering an image:

 <div class="content">
        <img src="images/Logo-PH1.png" alt="PHero" style="width: 20%;">
    </div>
Enter fullscreen mode Exit fullscreen mode
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

Image description

3. Centering an element:

   <div class="content">
        <div style="background-color:tomato; width: 200px; height: 200px;">

        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

Enter fullscreen mode Exit fullscreen mode

Image description

*Bass !!! অনেকটুক হল… একবারে না বুঝলে কয়েকবার পড়ে তারপর বুঝার চেষ্টা করুন। নিজে নিজে blog পড়ার সাথে সাথে code গুলোও করুন। তারপর আস্তে আস্তে concept clear হবে। *

~Let’s_code_your_career
~Happy_Coding!!!

Top comments (19)

Collapse
 
pengeszikra profile image
Peter Vivo
.center {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

One more for centering both horizontally and vertically -
.centered{
height:100vh;//You can put any other value as height
display:grid;
place-items:center;
}

Collapse
 
pritom627 profile image
Pritom Acharya

Very helpful.

Collapse
 
joysaha23 profile image
Joy Saha

very helpful...!❤

Collapse
 
themihir profile image
Mihir Das

Thanks a lot.

Collapse
 
fh_limon360_11dfb22ef9fb6 profile image
FH Limon360

very helpful

Collapse
 
dexcoder9 profile image
deXcoder9

thanks its very helpful

Collapse
 
habibullahakhand profile image
Md Habibullah Akhand

thanks apu

Collapse
 
syedashiqbd profile image
Syed Ashiq

Thanks a lot for this informative article, which we are bound to easily understand.

Collapse
 
mdarh411 profile image
Abdur Razzaque

আমার মাথা এখনো ঘুরতেছে। তবে হেল্পফুল এই পোস্টটি। প্রয়োজনের সময় কিভাবে খুজে পাবো জানিনা। থ্যাংক ইউ ফর শেয়ার উইথ আস।

Collapse
 
dabarshi profile image
dabarshi

Bookmark it.

Collapse
 
marjanhasan profile image
Marjan

Thanks a ton for make it easy