CSS ಬಳಸಿಕೊಂಡು ಡಿವ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ

Mia Chevalier
ಭಾನುವಾರ, ಜೂನ್ 16, 2024 02:12:39 ಪೂರ್ವಾಹ್ನ
HTML and CSS

CSS ನೊಂದಿಗೆ ಡಿವ್ ಅಲೈನ್ಮೆಂಟ್ ಅನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವುದು

CSS ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುವ ಸಾಮಾನ್ಯ ಕಾರ್ಯವಾಗಿದೆ. ಅದು ಬಟನ್, ಇಮೇಜ್ ಅಥವಾ ಡಿವಿಯನ್ನು ಜೋಡಿಸುತ್ತಿರಲಿ, ಪರಿಪೂರ್ಣ ಜೋಡಣೆಯನ್ನು ಸಾಧಿಸುವುದು ಕೆಲವೊಮ್ಮೆ ಟ್ರಿಕಿ ಆಗಿರಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ನಾವು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ವಿವಿಧ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ a

ಇನ್ನೊಂದರೊಳಗೆ
CSS ಬಳಸಿ.

ಈ ತಂತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮತ್ತು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ವೆಬ್ ಅಂಶಗಳನ್ನು ನೀವು ಬಯಸುವ ಸ್ಥಳದಲ್ಲಿ ನಿಖರವಾಗಿ ಇರಿಸಲಾಗಿದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಈ ಅಗತ್ಯ CSS ಕೌಶಲ್ಯದ ಬಗ್ಗೆ ನಿಮಗೆ ಸಮಗ್ರ ತಿಳುವಳಿಕೆಯನ್ನು ನೀಡಲು ನಾವು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್, ಗ್ರಿಡ್ ಮತ್ತು ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ವಿವಿಧ ವಿಧಾನಗಳನ್ನು ಒಳಗೊಳ್ಳುತ್ತೇವೆ.

ಆಜ್ಞೆ ವಿವರಣೆ
display: flex; ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ ಅನ್ನು ವಿವರಿಸುತ್ತದೆ ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಲೇಔಟ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
justify-content: center; ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
align-items: center; ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
place-items: center; ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
transform: translate(-50%, -50%); ಒಂದು ಅಂಶವನ್ನು ಅದರ ಸ್ವಂತ ಅಗಲ ಮತ್ತು ಎತ್ತರದ 50% ರಷ್ಟು ಕೇಂದ್ರಕ್ಕೆ ವರ್ಗಾಯಿಸುತ್ತದೆ.
position: absolute; ಅದರ ಹತ್ತಿರದ ಸ್ಥಾನದಲ್ಲಿರುವ ಪೂರ್ವಜರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಒಂದು ಅಂಶವನ್ನು ಇರಿಸುತ್ತದೆ.
top: 50%; ಅಂಶವನ್ನು ಹೊಂದಿರುವ ಅಂಶದ ಮೇಲ್ಭಾಗದಿಂದ 50% ಸ್ಥಾನವನ್ನು ಇರಿಸುತ್ತದೆ.
left: 50%; ಅಂಶವನ್ನು ಹೊಂದಿರುವ ಅಂಶದ ಎಡಭಾಗದಿಂದ 50% ಸ್ಥಾನವನ್ನು ಇರಿಸುತ್ತದೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್, ಗ್ರಿಡ್ ಮತ್ತು ಸಾಂಪ್ರದಾಯಿಕ CSS ನೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುವುದು

ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್ a ಅನ್ನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸಬೇಕು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ

ಬಳಸಿ . ಹೊಂದಿಸುವ ಮೂಲಕ ಮೂಲ ಧಾರಕದಲ್ಲಿ, ಮಕ್ಕಳ ಅಂಶಗಳು ಬಾಗಿದ ವಸ್ತುಗಳಾಗುತ್ತವೆ. ದಿ ಆಸ್ತಿ ಈ ಐಟಂಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ align-items: center; ಅವುಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಹೆಚ್ಚು ಬಹುಮುಖವಾಗಿದೆ ಮತ್ತು ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಎರಡನೇ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ನಾವು ಬಳಸುತ್ತೇವೆ ಇದೇ ರೀತಿಯ ಫಲಿತಾಂಶಗಳನ್ನು ಸಾಧಿಸಲು. ಅರ್ಜಿ ಸಲ್ಲಿಸುವ ಮೂಲಕ ಮೂಲ ಧಾರಕಕ್ಕೆ ಮತ್ತು , ಮಗುವಿನ ಅಂಶಗಳು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಎರಡೂ ಕೇಂದ್ರೀಕೃತವಾಗಿವೆ. ಗ್ರಿಡ್ ಆಧಾರಿತ ಲೇಔಟ್‌ಗಳಿಗೆ ಈ ವಿಧಾನವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಅಂತಿಮವಾಗಿ, ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನವು ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ position: absolute; ಮಗುವಿನ ಅಂಶ ಮತ್ತು ಬಳಕೆಯ ಮೇಲೆ ಮತ್ತು ಜೊತೆಗೆ ಅದನ್ನು ಪೋಷಕರೊಳಗೆ ಕೇಂದ್ರೀಕರಿಸಲು. ಸ್ಥಿರ ಗಾತ್ರದ ಅಂಶಗಳಿಗೆ ಈ ವಿಧಾನವು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅಡ್ಡಲಾಗಿ ಮಧ್ಯದಲ್ಲಿ ಡಿವಿ

Flexbox ಜೊತೆಗೆ HTML ಮತ್ತು CSS

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ಡಿವ್ ಅನ್ನು ಕೇಂದ್ರೀಕರಿಸುವುದು

ಗ್ರಿಡ್ ಲೇಔಟ್‌ನೊಂದಿಗೆ HTML ಮತ್ತು CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ನೊಂದಿಗೆ ಕೇಂದ್ರೀಕರಿಸಲು ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನ

ಮಾರ್ಜಿನ್ ಆಟೋ ಜೊತೆಗೆ HTML ಮತ್ತು CSS

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಸುಧಾರಿತ ತಂತ್ರಗಳು

ಧಾರಕದಲ್ಲಿ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವ ಇನ್ನೊಂದು ವಿಧಾನವು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಆಸ್ತಿ. ಈ ವಿಧಾನವು ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್ ಅಥವಾ ಇನ್‌ಲೈನ್ ಅಂಶಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ. ಅರ್ಜಿ ಸಲ್ಲಿಸುವ ಮೂಲಕ ಪೋಷಕ ಕಂಟೇನರ್‌ಗೆ, ಎಲ್ಲಾ ಮಕ್ಕಳ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್‌ಗೆ ಪರಿವರ್ತಿಸದ ಹೊರತು ಈ ವಿಧಾನವು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ಬಳಸಬಹುದು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಆಸ್ತಿ. ಅಂಶದ ಎಡ ಮತ್ತು ಬಲ ಅಂಚುಗಳನ್ನು ಸ್ವಯಂ ಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು ಅದರ ಮೂಲ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಅದನ್ನು ಅಡ್ಡಲಾಗಿ ಮಧ್ಯದಲ್ಲಿ ಮಾಡಬಹುದು. ಈ ತಂತ್ರವು ಸರಳವಾಗಿದೆ ಮತ್ತು ಸ್ಥಿರ-ಅಗಲ ಅಂಶಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಮತ್ತು ಗ್ರಿಡ್‌ನಂತಹ ಆಧುನಿಕ ಸಿಎಸ್‌ಎಸ್ ಲೇಔಟ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಈ ವಿಧಾನಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು ಅಗತ್ಯವಿರುವಂತೆ ಅಂಶಗಳನ್ನು ನಿಖರವಾಗಿ ಜೋಡಿಸಲು ಸಮಗ್ರ ಟೂಲ್‌ಕಿಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.

  1. ನಾನು ಇನ್‌ಲೈನ್ ಅಂಶವನ್ನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದು?
  2. ಬಳಸಿ ಪೋಷಕ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಇನ್‌ಲೈನ್ ಅಂಶಗಳ ಮಧ್ಯಕ್ಕೆ.
  3. ನಾನು ಅಂಚು ಬಳಸಬಹುದೇ: ಸ್ವಯಂ; ಬ್ಲಾಕ್ ಅಂಶವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು?
  4. ಹೌದು, ಸೆಟ್ಟಿಂಗ್ ಎಡ ಮತ್ತು ಬಲ ಬದಿಗಳಲ್ಲಿ ಬ್ಲಾಕ್ ಅಂಶವನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
  5. ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಮತ್ತು ಗ್ರಿಡ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
  6. ಒಂದು ಆಯಾಮದ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಎರಡು ಆಯಾಮದ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಆಗಿದೆ.
  7. CSS ನೊಂದಿಗೆ ಸ್ಥಿರ-ಅಗಲ ಅಂಶವನ್ನು ನಾನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದು?
  8. ಬಳಸಿ ಅಥವಾ ಜೊತೆಗೆ
  9. ನಾನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದೇ?
  10. ಹೌದು, ಬಳಸಿ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು.
  11. ಪಠ್ಯವನ್ನು ಜೋಡಿಸುತ್ತದೆಯೇ: ಕೇಂದ್ರ; ಬ್ಲಾಕ್ ಅಂಶಗಳಿಗಾಗಿ ಕೆಲಸ ಮಾಡುವುದೇ?
  12. ಇಲ್ಲ, ಇನ್‌ಲೈನ್ ಅಥವಾ ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್ ಅಂಶಗಳಿಗಾಗಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
  13. ಧಾರಕದಲ್ಲಿ ಬಹು ಅಂಶಗಳನ್ನು ನಾನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದು?
  14. ಬಳಸಿ ಜೊತೆಗೆ ಮತ್ತು
  15. ಸ್ಥಳ-ಐಟಂಗಳು ಎಂದರೇನು: ಕೇಂದ್ರ; ಗ್ರಿಡ್‌ನಲ್ಲಿ?
  16. ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
  17. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್ ಇಲ್ಲದೆ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಸಾಧ್ಯವೇ?
  18. ಹೌದು, ಅಂತಹ ವಿಧಾನಗಳನ್ನು ಬಳಸುವುದು , , ಅಥವಾ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಬಹುದು.

CSS ಕೇಂದ್ರೀಕರಣ ತಂತ್ರಗಳನ್ನು ಸುತ್ತಿಕೊಳ್ಳುವುದು

ವಿಭಿನ್ನ CSS ವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ದೃಷ್ಟಿಗೆ ಇಷ್ಟವಾಗುವ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅವಶ್ಯಕವಾಗಿದೆ. ಮುಂತಾದ ತಂತ್ರಗಳನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವ ಮೂಲಕ , , ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು, ಅಭಿವರ್ಧಕರು ತಮ್ಮ ವಿನ್ಯಾಸಗಳು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಕಲಾತ್ಮಕವಾಗಿ ಹಿತಕರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಈ ವಿಧಾನಗಳ ಪ್ರಯೋಗವು CSS ಸಾಮರ್ಥ್ಯಗಳ ಆಳವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.