DEV Community

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

Posted on • Edited on

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

#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

View full discussion (19 comments)

Read next

divineisnotakid profile image

Exploring Nesting with Flexbox

Divine-Favour Daniel -

ashcodebd profile image

Building a tribute page

Ashraf Mahmood -

kaja_uvais_a8691e947dd399 profile image

How to Create 3D Flip Card Animation Using HTML and CSS

Kaja Uvais -

ashcodebd profile image

Building a product landing page

Ashraf Mahmood -