CSS Layout – Horizontal And Vertical Alignment In CSS In Hindi

CSS

CSS Alignment In Hindi – Is Tutorial Me Hamne CSS Alignment Ko With Example Complete Explain Kiya Hai |

Alignment Ka Matalab Hai Kisi Html Element Ki Position Ko Horizontally Ya Vertically Move Krana |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

CSS Alignment In Hindi

Html Me Mostly Elements By Default Left Align Hote Hai, But Ham Is Alignment Ko CSS Properties Ki Help Se Change Kar Skte Hai Aur Web Page Ko Apni Need Ke According Design Kar Skte Hai , Iske Liye CSS Ki text-align, margin, padding, float, position Etc. Properties Ka Use Kiya Jata Hai |

(adsbygoogle = window.adsbygoogle || []).push({});

Center Align Elements In CSS In Hindi

Kisi Block Element Ko Center Me Align Krne Ke Liye Ham , margin : auto Property Ka Use Kar Skte Hai

Note : Jab margin : auto Set Krte Hai To Ek Bat Ka Dhyan Rkhana Chahiye Ki Us Element Ke Liye Hamne Width Bhi Set Kar Rkhi Ho , Aur Width 100% Nhi Honi Chahiye |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 70%;
  border: 3px solid #000;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>

<div class="center">
  <p>Master Programing</p>
</div>

</body>
</html>

Output :

Hmne Dekha Ki margin : auto And width Set Karne Se Div Center Me A Gya |

Center Align Text In CSS In Hindi

Kisi Element Ke Text Ko Align (Left, Right, Center) Krne Ke Liye text-align Property Ka Use Krte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.left {
  text-align: left;
  border: 3px solid black;
  margin-bottom : 5px;
}
.center {
  text-align: center;
  border: 3px solid green;
  margin-bottom : 5px;
}
.right {
  text-align: right;
  border: 3px solid blue;
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>

<div class="left">
  <p>This text is Left Align.</p>
</div>

<div class="center">
  <p>This text is Centered Align.</p>
</div>
<div class="right">
  <p>This text is Right Align.</p>
</div>

</body>
</html>

Output :

Center an Image In CSS In Hindi

Web Page Me Image Ko Center Me Lane Ke Liye Ham Us Image Ke Liye Left Aur Right Margin Ko Auto Kar Dete Hai Aur Image Ki Display Ko Block Bna Dete Hai , Kyoki Ham Jante Hai Ki <img> Ek Inline Element Hota Hai |

Example : Hamne <img> Ke src Me Image Ka Path Pexel Website Se Use Kiya Hai, Aap Apna Path Dal Skte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%";
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>

<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400">

</body>
</html>

Output :

Left and Right Align-Using position In CSS In Hindi

Hamne CSS Position Property Wale Tutorial Me Sikha Tha Ki Kese Ki Element Ki Postion Set Ki Ja Skti Hai |

Ek Example Se Samajhte Hai Ki Postion Se Kese Alignment Ki Ja Skti Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 5px;
  width: 250px;
  border: 3px solid #000fff;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>

<div class="right">
  <p>Master Programing- Learn Programing In Esay Way In Hindi Language</p>
</div>

</body>
</html>

Output :

Left and Right Align-Using float In CSS In Hindi

Float Property Ki Help Se Bhi Ham Elements Ki Alignment Change Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #000fff;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>
<div class="right">
  <p>Master Programing- Learn Programing In Esay Way In Hindi Language</p>
</div>

</body>
</html>

Output :

Center Vertically-Using padding In CSS InHindi

Ab Tak Ham Sirf Horizontal Alignment Ki Hi Bat Kar Rhe The , Ab Ham Elements Ko Vertically Align Karna Sikhenge |

Elements Ko Vertically Center Krne Ke Bahut Se Tarike Hai, Ham top And bottom Padding Ko Use Kar Ke Dekhte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 5px;
  border: 3px solid red;
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

Output :

Ab Agr Ham Chahe Ki Element Horizontally And Vertically Dono Tarah Se Centered Ho Jaye To , Iske Liye Padding And Text-Align : Center Property Ka Use Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid red;
  text-align: center;
}
</style>
</head>
<body>

<h2>Centering</h2>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Output :

Center Vertically-Using line-height In CSS In Hindi

Elements Ko Vertically Center Krne Ke Liye line-height Property Bhi Use Kar Skte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid red;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Master Programing CSS Align Tutorial</h2>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Output :

Center Vertically – Using Flexbox In CSS In Hindi

Elements Ko Center Align Krne Ke Liye Ham Flexbox Ka Bhi Use Kar Skte Hai | Iske Liye Hme justify-content : center And align-item : center Set Krna Hoga |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid red; 
}
</style>
</head>
<body>

<h2>Flexbox Centering</h2>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Output :

CSS Align Se Related Koi Doubt Ho To Comment Section Me Puchh Skte Hai |

(adsbygoogle = window.adsbygoogle || []).push({});

Leave a Reply

Your email address will not be published. Required fields are marked *