ವೆಬ್ಸೈಟ್ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ ಸೆಂಟರ್ ಚಿತ್ರಗಳು, ಪಠ್ಯ, ಮತ್ತು ಬ್ಲಾಕ್ ಅಂಶಗಳು
ನೀವು ವೆಬ್ಸೈಟ್ಗಳನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂಬುದನ್ನು ಕಲಿಯುತ್ತಿದ್ದರೆ , ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ಸೆಂಟರ್ ಐಟಂಗಳನ್ನು ಹೇಗೆ ಮಾಡಬೇಕೆಂಬುದು ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ತಂತ್ರಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಇದು ಪುಟದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಅರ್ಥವಾಗಬಹುದು, ಅಥವಾ ಇದು ವಿನ್ಯಾಸದ ಭಾಗವಾಗಿ ಹೆಡ್ಲೈನ್ಗಳಂತಹ ಸೆಂಟರ್-ಸಮರ್ಥಿಸುವ ಪಠ್ಯವಾಗಬಹುದು.
ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ (ಸಿಎಸ್ಎಸ್) ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕೇಂದ್ರಿತ ಚಿತ್ರಗಳು ಅಥವಾ ಪಠ್ಯ ಅಥವಾ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ವೆಬ್ಪುಟದ ಈ ದೃಶ್ಯ ನೋಟವನ್ನು ಸಾಧಿಸುವ ಸರಿಯಾದ ಮಾರ್ಗವಾಗಿದೆ. ಕೇಂದ್ರೀಕರಣಕ್ಕಾಗಿ ಹೆಚ್ಚಿನ ಗುಣಲಕ್ಷಣಗಳು ಆವೃತ್ತಿ 1.0 ಯಿಂದ ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿವೆ, ಮತ್ತು ಅವುಗಳು CSS3 ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ಬ್ರೌಸರ್ಗಳೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ .
ವೆಬ್ ವಿನ್ಯಾಸದ ಅನೇಕ ಅಂಶಗಳಂತೆ, ವೆಬ್ ಪುಟದಲ್ಲಿ ಸೆಂಟರ್ ಎಲಿಮೆಂಟ್ಗಳಿಗೆ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಲು ಅನೇಕ ಮಾರ್ಗಗಳಿವೆ. ಈ ದೃಶ್ಯ ನೋಟವನ್ನು ಸಾಧಿಸಲು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಲು ಕೆಲವು ವಿಭಿನ್ನ ಮಾರ್ಗಗಳನ್ನು ನೋಡೋಣ.
ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಸೆಂಟರ್ ಎಲಿಮೆಂಟ್ಸ್ ಗೆ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಅವಲೋಕನ
ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಕೇಂದ್ರೀಕರಿಸುವುದರಿಂದ ವೆಬ್ ಡಿಸೈನರ್ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ಒಂದು ಸವಾಲಾಗಿದೆ, ಏಕೆಂದರೆ ಈ ಒಂದು ದೃಶ್ಯ ಶೈಲಿಯನ್ನು ಸಾಧಿಸಲು ಹಲವು ವಿಭಿನ್ನ ಮಾರ್ಗಗಳಿವೆ. ವಿವಿಧ ವಿಧಾನಗಳು ಎಲ್ಲಾ ಅಂಶಗಳು ಪ್ರತಿ ಅಂಶದಲ್ಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲವೆಂದು ತಿಳಿದಿರುವ ಒಳ್ಳೆಯ ಅಥವಾ ಸುದೀರ್ಘವಾದ ವೆಬ್ ಡೆವಲಪರ್ಗಳಾಗಿದ್ದರೂ, ಹೊಸ ವೆಬ್ ವೃತ್ತಿಪರರಿಗೆ ಇದು ಭಯಾನಕ ಸವಾಲನ್ನು ಉಂಟುಮಾಡಬಹುದು, ಏಕೆಂದರೆ ವಿವಿಧ ವಿಧಾನಗಳ ಮೂಲಕ ಅವರು ಯಾವ ವಿಧಾನವನ್ನು ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಅಗತ್ಯವಿರುತ್ತದೆ. ಕೆಲವು ವಿಧಾನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಒಳ್ಳೆಯದು. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ, ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮವಾದ ವಿಧಾನವನ್ನು ನೀವು ಕಲಿಯುತ್ತೀರಿ.
ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ, ನೀವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಸಿಎಸ್ಎಸ್ ಬಳಸಬಹುದು:
- ಕೇಂದ್ರ ಪಠ್ಯ
- ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಎಲಿಮೆಂಟ್ (ವಿಭಾಗದಂತೆ)
- ಚಿತ್ರವೊಂದನ್ನು ಕೇಂದ್ರೀಕರಿಸಿ
- ಲಂಬವಾಗಿ ಒಂದು ಬ್ಲಾಕ್ ಅಥವಾ ಇಮೇಜ್ ಅನ್ನು ಕೇಂದ್ರೀಕರಿಸಿ
ಅನೇಕ (ಹಲವು) ವರ್ಷಗಳ ಹಿಂದೆ, ವೆಬ್ ವಿನ್ಯಾಸಕರು
ಪಠ್ಯದೊಂದಿಗೆ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಕೇಂದ್ರೀಕರಿಸಿ
ವೆಬ್ಪುಟದಲ್ಲಿ ಕೇಂದ್ರಕ್ಕೆ ಸುಲಭವಾದ ವಿಷಯ ಪಠ್ಯವಾಗಿದೆ. ಇದನ್ನು ಮಾಡಲು ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಒಂದು ಶೈಲಿ ಆಸ್ತಿ ಇದೆ: ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ. ಕೆಳಗೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ತೆಗೆದುಕೊಳ್ಳಿ, ಉದಾಹರಣೆಗೆ:
p.center {text-align: center; }
ಈ ಸಿಎಸ್ಎಸ್ನ ರೇಖೆಯೊಂದಿಗೆ, ಸೆಂಟರ್ ವರ್ಗದೊಂದಿಗೆ ಬರೆಯಲಾದ ಪ್ರತಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಅದರ ಮೂಲ ಅಂಶದ ಒಳಗೆ ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪ್ಯಾರಾಗ್ರಾಫ್ ಒಂದು ವಿಭಾಗದಲ್ಲಿದ್ದರೆ, ಅದು ಆ ವಿಭಾಗದ ಮಗುವಾಗಿದ್ದು, ಅದು
HTML ದಸ್ತಾವೇಜಿನಲ್ಲಿ ಅನ್ವಯಿಸಲಾದ ಈ ವರ್ಗದ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
ಈ ಪಠ್ಯವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲಾಗಿದೆ.
ಟೆಕ್ಸ್ಟ್-ಅಲೈನ್ ಆಸ್ತಿಯೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಕೇಂದ್ರೀಕರಿಸುವಾಗ, ಅದು ಅದರ ಅಂಶದೊಳಗೆ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ ಮತ್ತು ಪೂರ್ಣ ಪುಟದಲ್ಲಿಯೇ ಕೇಂದ್ರಿತವಾಗಿರಬಾರದು ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಕೇಂದ್ರ-ಸಮರ್ಥನೆ ಪಠ್ಯವು ದೊಡ್ಡ ಪ್ರಮಾಣದ ಬ್ಲಾಕ್ಗಳನ್ನು ಓದಲು ಕಷ್ಟವಾಗಬಹುದು ಎಂದು ನೆನಪಿಡಿ, ಆದ್ದರಿಂದ ಈ ಶೈಲಿಯನ್ನು ಕಡಿಮೆಯಾಗಿ ಬಳಸಿ. ಲೇಖನ ಮತ್ತು ಇತರ ವಿಷಯಕ್ಕಾಗಿ ಟೀಸರ್ ಪಠ್ಯದಂತಹ ಮುಖ್ಯ ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಸಣ್ಣ ಪಠ್ಯಗಳ ಪಠ್ಯವು ಕೇಂದ್ರೀಕೃತಗೊಂಡಾಗ ಓದುವುದು ಮತ್ತು ಉತ್ತಮವಾಗುವುದು, ಆದರೆ ಸಂಪೂರ್ಣ ಲೇಖನದಂತೆ, ಪಠ್ಯದ ದೊಡ್ಡ ಬ್ಲಾಕ್ಗಳು ವಿಷಯವು ಸಂಪೂರ್ಣ ಕೇಂದ್ರವಾಗಿದ್ದರೆ ಸೇವಿಸುವುದಕ್ಕೆ ಸವಾಲು ಮಾಡುತ್ತದೆ ಸಮರ್ಥನೆ. ನೆನಪಿಡಿ, ವೆಬ್ಸೈಟ್ ಪಠ್ಯಕ್ಕೆ ಬಂದಾಗ ಓದಲು ಯಾವಾಗಲೂ ಮುಖ್ಯವಾಗಿದೆ !
ಸಿಎಸ್ಎಸ್ ಜೊತೆ ವಿಷಯ ನಿರ್ಬಂಧಿಸುತ್ತದೆ
ನಿರ್ಬಂಧಿತ ಅಗಲ ಹೊಂದಿರುವ ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಯಾವುದೇ ಅಂಶಗಳು ಬ್ಲಾಕ್ಗಳು ಮತ್ತು ಬ್ಲಾಕ್-ಮಟ್ಟದ ಅಂಶವಾಗಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ. ಅನೇಕ ವೇಳೆ, ಈ ಬ್ಲಾಕ್ಗಳನ್ನು ಎಚ್ಟಿಎಮ್ಎಲ್
div.center {
ಅಂಚು: 0 ಸ್ವಯಂ;
ಅಗಲ: 80 ಎಮ್;
}
ಅಂಚು ಆಸ್ತಿಯ ಈ ಸಿಎಸ್ಎಸ್ ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ ಅಂಚುಗಳನ್ನು 0 ರ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ, ಆದರೆ ಎಡ ಮತ್ತು ಬಲವು "ಸ್ವಯಂ" ಅನ್ನು ಬಳಸುತ್ತವೆ. ಇದು ಮೂಲಭೂತವಾಗಿ ಲಭ್ಯವಿರುವ ಯಾವುದೇ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ವಿಂಡೋದ ಎರಡು ಭಾಗಗಳ ನಡುವೆ ಸಮನಾಗಿ ವಿಭಜಿಸುತ್ತದೆ, ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪುಟದ ಅಂಶವನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
ಇಲ್ಲಿ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗಿದೆ:
ಆದರೆ ಅದರ ಒಳಗಿನ ಪಠ್ಯವು ಜೋಡಿಸಲ್ಪಟ್ಟಿದೆ.
ನಿಮ್ಮ ಬ್ಲಾಕ್ ವ್ಯಾಖ್ಯಾನಿಸಿದ ಅಗಲವನ್ನು ಹೊಂದಿರುವವರೆಗೆ, ಅದು ಒಳಗೊಂಡಿರುವ ಅಂಶದ ಒಳಗೆ ಸ್ವತಃ ಕೇಂದ್ರವಾಗಿರುತ್ತದೆ. ಆ ಬ್ಲಾಕ್ನಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಪಠ್ಯವು ಅದರೊಳಗೆ ಕೇಂದ್ರೀಕೃತವಾಗಿರುವುದಿಲ್ಲ, ಆದರೆ ಎಡ-ಸಮರ್ಥನೆಯಾಗುತ್ತದೆ. ಇದು ವೆಬ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಬಿಫಸ್ ಪಠ್ಯವನ್ನು ಸಮರ್ಥಿಸುತ್ತದೆ. ಪಠ್ಯವನ್ನು ಕೇಂದ್ರಿಕೃತಗೊಳಿಸಬೇಕೆಂದು ನೀವು ಬಯಸಿದರೆ, ನಾವು ಈ ವಿಧಾನದೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಪಠ್ಯ-ವಿಂಗಡಣಾ ಗುಣವನ್ನು ವಿಭಾಗದ ಮಧ್ಯಭಾಗದಲ್ಲಿ ಬಳಸಬಹುದಾಗಿತ್ತು.
ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಚಿತ್ರಗಳು ಕೇಂದ್ರೀಕರಿಸಿ
ಪ್ಯಾರಾಗ್ರಾಫ್ಗಾಗಿ ಈಗಾಗಲೇ ನಾವು ನೋಡಿದ ಒಂದೇ ಪಠ್ಯ-ಅಲೈನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಕೇಂದ್ರೀಕರಿಸಿದ ಚಿತ್ರಗಳನ್ನು ಬಹುತೇಕ ಬ್ರೌಸರ್ಗಳು ಪ್ರದರ್ಶಿಸುತ್ತಿರುವಾಗ, ಅದು W3C ನಿಂದ ಶಿಫಾರಸು ಮಾಡದ ಕಾರಣದಿಂದಾಗಿ ಆ ತಂತ್ರಜ್ಞಾನವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಇದು ಶಿಫಾರಸು ಮಾಡದ ಕಾರಣ, ಬ್ರೌಸರ್ಗಳ ಭವಿಷ್ಯದ ಆವೃತ್ತಿಗಳು ಈ ವಿಧಾನವನ್ನು ನಿರ್ಲಕ್ಷಿಸಲು ಆಯ್ಕೆಯಾಗಬಹುದು.
ಚಿತ್ರದ ಮಧ್ಯಕ್ಕೆ ಪಠ್ಯ-ವಿಲೀನವನ್ನು ಬಳಸುವ ಬದಲು, ಚಿತ್ರವು ಬ್ಲಾಕ್-ಮಟ್ಟದ ಅಂಶ ಎಂದು ಬ್ರೌಸರ್ಗೆ ಸ್ಪಷ್ಟವಾಗಿ ತಿಳಿಸಬೇಕು. ಈ ರೀತಿಯಾಗಿ, ನೀವು ಇತರ ಯಾವುದೇ ಬ್ಲಾಕ್ ಅನ್ನು ನೀವು ಕೇಂದ್ರೀಕರಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು ಸಿಎಸ್ಎಸ್ ಇಲ್ಲಿದೆ:
img.center {
ಪ್ರದರ್ಶಿಸು: ನಿರ್ಬಂಧಿಸು;
ಅಂಚು-ಎಡ: ಸ್ವಯಂ;
ಅಂಚು-ಬಲ: ಸ್ವಯಂ;
}
ಮತ್ತು ಇಲ್ಲಿ ಎಚ್ಟಿಎಮ್ಎಲ್ ನಾವು ಕೇಂದ್ರೀಕರಿಸಲು ಬಯಸುವ ಚಿತ್ರಕ್ಕಾಗಿ:
ನೀವು ಇನ್ ಲೈನ್ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸೆಂಟರ್ ಆಬ್ಜೆಕ್ಟ್ಗಳನ್ನು ಸಹ ಮಾಡಬಹುದು (ಕೆಳಗೆ ನೋಡಿ), ಆದರೆ ಈ ವಿಧಾನವು ನಿಮ್ಮ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ಶಿಫಾರಸು ಮಾಡಲಾಗುವುದಿಲ್ಲ. ನೆನಪಿಡಿ, ನಾವು ಶೈಲಿ ಮತ್ತು ರಚನೆಯನ್ನು ಬೇರ್ಪಡಿಸಲು ಬಯಸುತ್ತೇವೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ HTML ಸಂಕೇತಕ್ಕೆ CSS ಶೈಲಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುವ ವಿರಾಮದೊಂದಿಗೆ ಸೇರಿಸಿಕೊಳ್ಳಬೇಕು ಮತ್ತು, ಸಾಧ್ಯವಾದಾಗ ಅದನ್ನು ತಪ್ಪಿಸಬೇಕು.
ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಲಂಬವಾಗಿ ಎಲಿಮೆಂಟ್ಸ್ ಕೇಂದ್ರೀಕರಿಸಿ
ವಸ್ತುಗಳ ಮಧ್ಯೆ ಲಂಬವಾಗಿ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಸವಾಲಾಗಿತ್ತು, ಆದರೆ CSS3 ನಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಹೊಂದಿಕೊಳ್ಳುವ ಬಾಕ್ಸ್ ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಬಿಡುಗಡೆಯೊಂದಿಗೆ, ಅದನ್ನು ಮಾಡಲು ಒಂದು ಮಾರ್ಗವಿದೆ.
ಲಂಬವಾದ ಜೋಡಣೆಯು ಮೇಲ್ಭಾಗದಲ್ಲಿ ಜೋಡಿಸಲಾದ ಸಮತಲ ಜೋಡಣೆಯನ್ನು ಹೋಲುತ್ತದೆ. CSS ಆಸ್ತಿ ಮಧ್ಯಮ ಮೌಲ್ಯದೊಂದಿಗೆ ಲಂಬ-ಹೊಂದಿಸು.
.vcenter {
ಲಂಬ- align: ಮಧ್ಯಮ;
}
ಈ ವಿಧಾನಕ್ಕೆ ತೊಂದರೆಯಿಲ್ಲದೆ ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು ಸಿಎಸ್ಎಸ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ, ಆದಾಗ್ಯೂ ಈ ಹೊಸ ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ ವಿಧಾನಕ್ಕೆ ಹೆಚ್ಚು ಹೆಚ್ಚು ಬರುತ್ತಿದೆ! ವಾಸ್ತವವಾಗಿ, ಇಂದು ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಈ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ಇದರ ಅರ್ಥವೇನೆಂದರೆ, ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನೊಂದಿಗಿನ ನಿಮ್ಮ ಮಾತ್ರ ಕಳವಳಗಳು ಹೆಚ್ಚು ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಯಾಗಿರುತ್ತದೆ.
ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಕೆಳಗಿನ ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಕಂಟೇನರ್ನಲ್ಲಿ ನೀವು ಕೇಂದ್ರ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಸೂಚಿಸುವಂತೆ W3C ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ:
- ಒಳಗೊಂಡಿರುವ ಅಂಶದೊಳಗೆ ಕೇಂದ್ರೀಕೃತವಾಗಿರುವ ಅಂಶಗಳನ್ನು ಇರಿಸಿ, ಉದಾಹರಣೆಗೆ div.
- ಒಳಗೊಂಡಿರುವ ಅಂಶದ ಮೇಲೆ ಕನಿಷ್ಟ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ.
- ಟೇಬಲ್ ಸೆಲ್ನ ಅಂಶವನ್ನು ಹೊಂದಿರುವಂತೆ ಘೋಷಿಸಿ.
- ಲಂಬ ಜೋಡಣೆಯನ್ನು "ಮಧ್ಯಮ" ಗೆ ಹೊಂದಿಸಿ.
ಉದಾಹರಣೆಗೆ, ಇಲ್ಲಿ ಸಿಎಸ್ಎಸ್:
.vcenter {
ನಿಮಿಷ ಎತ್ತರ: 12 ಎಮ್;
ಪ್ರದರ್ಶನ: ಟೇಬಲ್-ಸೆಲ್;
ಲಂಬ- align: ಮಧ್ಯಮ;
}
ಮತ್ತು ಇಲ್ಲಿ HTML ಆಗಿದೆ:
ಈ ಪಠ್ಯವು ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ.
ಲಂಬ ಕೇಂದ್ರೀಕರಣ ಮತ್ತು ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್
ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ (ಐಇ) ಅನ್ನು ಕೇಂದ್ರಕ್ಕೆ ಒತ್ತಾಯಿಸಲು ಕೆಲವು ಮಾರ್ಗಗಳಿವೆ ಮತ್ತು ನಂತರ ಷರತ್ತುಬದ್ಧ ಕಾಮೆಂಟ್ಗಳನ್ನು ಬಳಸುತ್ತವೆ, ಇದರಿಂದಾಗಿ ಐಇ ಶೈಲಿಗಳನ್ನು ಮಾತ್ರ ನೋಡುತ್ತದೆ, ಆದರೆ ಅವುಗಳು ಸ್ವಲ್ಪ ಮಾತಿನ ಮತ್ತು ಕೊಳಕುಗಳಾಗಿವೆ. ಮೈಕ್ರೋಸಾಫ್ಟ್ ಐಇನ ಹಳೆಯ ಆವೃತ್ತಿಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಕೈಬಿಡಲು ಮೈಕ್ರೋಸಾಫ್ಟ್ನ ಇತ್ತೀಚಿನ ನಿರ್ಧಾರದೊಂದಿಗೆ, ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್ಗಳು ಶೀಘ್ರದಲ್ಲೇ ತಮ್ಮ ಮಾರ್ಗದಲ್ಲಿಯೇ ಇರಬೇಕು, ವೆಬ್ ವಿನ್ಯಾಸಕಾರರು ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ಗಳ ಆಧುನಿಕ ವಿನ್ಯಾಸದ ವಿಧಾನಗಳನ್ನು ಬಳಸಲು ಸುಲಭವಾಗುವುದು, ಇದು ಎಲ್ಲಾ ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ಗಳನ್ನು ಮಾಡುತ್ತದೆ, ಕೇವಲ ಕೇಂದ್ರೀಕರಿಸಿಲ್ಲ, ಎಲ್ಲ ವೆಬ್ ವಿನ್ಯಾಸಕಾರರಿಗೂ ಹೆಚ್ಚು ಸುಲಭ.