CSS ನೊಂದಿಗೆ ಡಿವ್ ಅಲೈನ್ಮೆಂಟ್ ಅನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವುದು
CSS ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ವೆಬ್ ಡೆವಲಪರ್ಗಳು ಎದುರಿಸುವ ಸಾಮಾನ್ಯ ಕಾರ್ಯವಾಗಿದೆ. ಅದು ಬಟನ್, ಇಮೇಜ್ ಅಥವಾ ಡಿವಿಯನ್ನು ಜೋಡಿಸುತ್ತಿರಲಿ, ಪರಿಪೂರ್ಣ ಜೋಡಣೆಯನ್ನು ಸಾಧಿಸುವುದು ಕೆಲವೊಮ್ಮೆ ಟ್ರಿಕಿ ಆಗಿರಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ನಾವು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ವಿವಿಧ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ a
ಈ ತಂತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮತ್ತು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ವೆಬ್ ಅಂಶಗಳನ್ನು ನೀವು ಬಯಸುವ ಸ್ಥಳದಲ್ಲಿ ನಿಖರವಾಗಿ ಇರಿಸಲಾಗಿದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಈ ಅಗತ್ಯ 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 ಅನ್ನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸಬೇಕು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ
ಎರಡನೇ ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ, ನಾವು ಬಳಸುತ್ತೇವೆ ಇದೇ ರೀತಿಯ ಫಲಿತಾಂಶಗಳನ್ನು ಸಾಧಿಸಲು. ಅರ್ಜಿ ಸಲ್ಲಿಸುವ ಮೂಲಕ ಮೂಲ ಧಾರಕಕ್ಕೆ ಮತ್ತು , ಮಗುವಿನ ಅಂಶಗಳು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಎರಡೂ ಕೇಂದ್ರೀಕೃತವಾಗಿವೆ. ಗ್ರಿಡ್ ಆಧಾರಿತ ಲೇಔಟ್ಗಳಿಗೆ ಈ ವಿಧಾನವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಅಂತಿಮವಾಗಿ, ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನವು ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ 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>
ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಧಾರಕದಲ್ಲಿ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವ ಇನ್ನೊಂದು ವಿಧಾನವು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಆಸ್ತಿ. ಈ ವಿಧಾನವು ಇನ್ಲೈನ್-ಬ್ಲಾಕ್ ಅಥವಾ ಇನ್ಲೈನ್ ಅಂಶಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ. ಅರ್ಜಿ ಸಲ್ಲಿಸುವ ಮೂಲಕ ಪೋಷಕ ಕಂಟೇನರ್ಗೆ, ಎಲ್ಲಾ ಮಕ್ಕಳ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಇನ್ಲೈನ್-ಬ್ಲಾಕ್ಗೆ ಪರಿವರ್ತಿಸದ ಹೊರತು ಈ ವಿಧಾನವು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ಬಳಸಬಹುದು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಆಸ್ತಿ. ಅಂಶದ ಎಡ ಮತ್ತು ಬಲ ಅಂಚುಗಳನ್ನು ಸ್ವಯಂ ಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು ಅದರ ಮೂಲ ಕಂಟೇನರ್ನಲ್ಲಿ ಅದನ್ನು ಅಡ್ಡಲಾಗಿ ಮಧ್ಯದಲ್ಲಿ ಮಾಡಬಹುದು. ಈ ತಂತ್ರವು ಸರಳವಾಗಿದೆ ಮತ್ತು ಸ್ಥಿರ-ಅಗಲ ಅಂಶಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಮತ್ತು ಗ್ರಿಡ್ನಂತಹ ಆಧುನಿಕ ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಈ ವಿಧಾನಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು ಅಗತ್ಯವಿರುವಂತೆ ಅಂಶಗಳನ್ನು ನಿಖರವಾಗಿ ಜೋಡಿಸಲು ಸಮಗ್ರ ಟೂಲ್ಕಿಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ನಾನು ಇನ್ಲೈನ್ ಅಂಶವನ್ನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದು?
- ಬಳಸಿ ಪೋಷಕ ಕಂಟೇನರ್ನಲ್ಲಿ ಇನ್ಲೈನ್ ಅಂಶಗಳ ಮಧ್ಯಕ್ಕೆ.
- ನಾನು ಅಂಚು ಬಳಸಬಹುದೇ: ಸ್ವಯಂ; ಬ್ಲಾಕ್ ಅಂಶವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು?
- ಹೌದು, ಸೆಟ್ಟಿಂಗ್ ಎಡ ಮತ್ತು ಬಲ ಬದಿಗಳಲ್ಲಿ ಬ್ಲಾಕ್ ಅಂಶವನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
- ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಮತ್ತು ಗ್ರಿಡ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
- ಒಂದು ಆಯಾಮದ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಎರಡು ಆಯಾಮದ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಆಗಿದೆ.
- CSS ನೊಂದಿಗೆ ಸ್ಥಿರ-ಅಗಲ ಅಂಶವನ್ನು ನಾನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದು?
- ಬಳಸಿ ಅಥವಾ ಜೊತೆಗೆ
- ನಾನು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದೇ?
- ಹೌದು, ಬಳಸಿ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು.
- ಪಠ್ಯವನ್ನು ಜೋಡಿಸುತ್ತದೆಯೇ: ಕೇಂದ್ರ; ಬ್ಲಾಕ್ ಅಂಶಗಳಿಗಾಗಿ ಕೆಲಸ ಮಾಡುವುದೇ?
- ಇಲ್ಲ, ಇನ್ಲೈನ್ ಅಥವಾ ಇನ್ಲೈನ್-ಬ್ಲಾಕ್ ಅಂಶಗಳಿಗಾಗಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
- ಧಾರಕದಲ್ಲಿ ಬಹು ಅಂಶಗಳನ್ನು ನಾನು ಹೇಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದು?
- ಬಳಸಿ ಜೊತೆಗೆ ಮತ್ತು
- ಸ್ಥಳ-ಐಟಂಗಳು ಎಂದರೇನು: ಕೇಂದ್ರ; ಗ್ರಿಡ್ನಲ್ಲಿ?
- ಗ್ರಿಡ್ ಕಂಟೇನರ್ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
- ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್ ಇಲ್ಲದೆ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಸಾಧ್ಯವೇ?
- ಹೌದು, ಅಂತಹ ವಿಧಾನಗಳನ್ನು ಬಳಸುವುದು , , ಅಥವಾ ಅಂಶಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಬಹುದು.
CSS ಕೇಂದ್ರೀಕರಣ ತಂತ್ರಗಳನ್ನು ಸುತ್ತಿಕೊಳ್ಳುವುದು
ವಿಭಿನ್ನ CSS ವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ದೃಷ್ಟಿಗೆ ಇಷ್ಟವಾಗುವ ವೆಬ್ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಅವಶ್ಯಕವಾಗಿದೆ. ಮುಂತಾದ ತಂತ್ರಗಳನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವ ಮೂಲಕ , , ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು, ಅಭಿವರ್ಧಕರು ತಮ್ಮ ವಿನ್ಯಾಸಗಳು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಕಲಾತ್ಮಕವಾಗಿ ಹಿತಕರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಈ ವಿಧಾನಗಳ ಪ್ರಯೋಗವು CSS ಸಾಮರ್ಥ್ಯಗಳ ಆಳವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.