CSS ಬಳಸಿಕೊಂಡು ಡಿವ್‌ನಲ್ಲಿ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು

ಲಂಬ ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಸುಧಾರಿತ CSS ತಂತ್ರಗಳು

ಮೂರನೇ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ನಾವು ಟೇಬಲ್ ಪ್ರದರ್ಶನ ವಿಧಾನವನ್ನು ಬಳಸುತ್ತೇವೆ. ಸೆಟ್ಟಿಂಗ್ display: table; ಕಂಟೇನರ್ ಮೇಲೆ ಮತ್ತು display: table-cell; ಇದರೊಂದಿಗೆ ರಚಿಸಲಾದ ಹುಸಿ ಅಂಶದ ಮೇಲೆ ::before ಬಳಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ vertical-align: middle; ಆಸ್ತಿ. ಈ ವಿಧಾನವು ಟೇಬಲ್ ಕೋಶಗಳ ನಡವಳಿಕೆಯನ್ನು ಅನುಕರಿಸುತ್ತದೆ, ಇದು ವಿಷಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಈ ವಿಧಾನವನ್ನು ಕಡಿಮೆ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗಿದ್ದರೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಅಥವಾ ಲೆಗಸಿ ಕೋಡ್‌ನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. ಹೊಸ ಲೇಔಟ್ ಸಿಸ್ಟಂಗಳನ್ನು ಅವಲಂಬಿಸದೆ ವಿಷಯವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಇದು ವಿಶ್ವಾಸಾರ್ಹ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

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

ಲಂಬ ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಬಳಸುವುದು

ಸಿಎಸ್ಎಸ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

ಲಂಬ ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುವುದು

CSS ಗ್ರಿಡ್

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

ಲಂಬ ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಟೇಬಲ್ ಪ್ರದರ್ಶನವನ್ನು ಬಳಸುವುದು

CSS ಟೇಬಲ್ ಪ್ರದರ್ಶನ

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

ಲಂಬ ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಲೈನ್ ಎತ್ತರವನ್ನು ಬಳಸುವುದು

CSS ಲೈನ್ ಎತ್ತರ

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

CSS ನಲ್ಲಿ ಲಂಬ ಕೇಂದ್ರೀಕರಣದ ಬಗ್ಗೆ ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳು

1. ಡಿವಿಯಲ್ಲಿ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ಸುಲಭವಾದ ಮಾರ್ಗ ಯಾವುದು?
2. ಬಳಸಿ display: flex; ಜೊತೆಗೆ justify-content: center; ಮತ್ತು align-items: center; ಸಾಮಾನ್ಯವಾಗಿ ಸುಲಭ ಮತ್ತು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ವಿಧಾನವಾಗಿದೆ.
3. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ?
4. ಇದರೊಂದಿಗೆ ಟೇಬಲ್ ಪ್ರದರ್ಶನ ವಿಧಾನವನ್ನು ಬಳಸುವುದು display: table; ಮತ್ತು vertical-align: middle; ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲಂಬ ಕೇಂದ್ರೀಕರಣವನ್ನು ಸಾಧಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು.
5. ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು CSS ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸಬಹುದೇ?
6. ಹೌದು, CSS ಗ್ರಿಡ್ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಬಳಸಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದು display: grid; ಮತ್ತು place-items: center;.
7. ಬಹು-ಸಾಲಿನ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ಸಾಧ್ಯವೇ?
8. ಹೌದು, ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ ಬಹು-ಸಾಲಿನ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದು.
9. ತಿಳಿದಿರುವ ಕಂಟೇನರ್ ಎತ್ತರದೊಂದಿಗೆ ನೀವು ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ?
10. ನೀವು ಹೊಂದಿಸಬಹುದು line-height ಧಾರಕದ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಲು ಆಸ್ತಿ, ಪಠ್ಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
11. ಕಂಟೇನರ್ ಎತ್ತರವು ಡೈನಾಮಿಕ್ ಆಗಿದ್ದರೆ ಏನು?
12. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್, ಗ್ರಿಡ್ ಅಥವಾ ದಿ transform ಗುಣಲಕ್ಷಣವು ಸ್ಥಿರವಾದ ಲಂಬ ಕೇಂದ್ರೀಕರಣವನ್ನು ಖಾತ್ರಿಗೊಳಿಸುತ್ತದೆ, ಡೈನಾಮಿಕ್ ಕಂಟೇನರ್ ಎತ್ತರಗಳೊಂದಿಗೆ ಸಹ.
13. ಬಳಸಲು ಯಾವುದೇ ನ್ಯೂನತೆಗಳಿವೆಯೇ transform: translateY(-50%);?
14. ಪರಿಣಾಮಕಾರಿಯಾಗಿದ್ದರೂ, ಅದನ್ನು ಪೋಷಕರು ಹೊಂದಿರಬೇಕು position: relative; ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್‌ಗೆ ಹೋಲಿಸಿದರೆ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಬಹುದು.
15. ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸದಲ್ಲಿ ನೀವು ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ?
16. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ಹೆಚ್ಚು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸಗಳಿಗೆ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ, ಏಕೆಂದರೆ ಅವು ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ದೃಷ್ಟಿಕೋನಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ.

ಲಂಬ ಕೇಂದ್ರೀಕರಣದ ಅಂತಿಮ ಆಲೋಚನೆಗಳು

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