ಲೇಖಕರಿಂದ:ನಮ್ಮ ಬ್ಲಾಗ್‌ನ ಪುಟಗಳಿಗೆ ನಾನು ನಿಮ್ಮನ್ನು ಮತ್ತೊಮ್ಮೆ ಸ್ವಾಗತಿಸುತ್ತೇನೆ. ಇಂದಿನ ಲೇಖನದಲ್ಲಿ ನಾನು ಮಾತನಾಡಲು ಬಯಸುತ್ತೇನೆ ವಿವಿಧ ತಂತ್ರಗಳುಬ್ಲಾಕ್‌ಗಳು ಮತ್ತು ಅವುಗಳ ವಿಷಯ ಎರಡಕ್ಕೂ ಅನ್ವಯಿಸಬಹುದಾದ ಜೋಡಣೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, css ನಲ್ಲಿ ಬ್ಲಾಕ್ಗಳನ್ನು ಹೇಗೆ ಜೋಡಿಸುವುದು, ಹಾಗೆಯೇ ಪಠ್ಯ ಜೋಡಣೆ.
ಬ್ಲಾಕ್ಗಳನ್ನು ಕೇಂದ್ರಕ್ಕೆ ಜೋಡಿಸುವುದು
CSS ನಲ್ಲಿ, ಬ್ಲಾಕ್ ಅನ್ನು ಕೇಂದ್ರೀಕರಿಸುವುದು ಸುಲಭ. ಇದು ಅನೇಕರಿಗೆ ಹೆಚ್ಚು ತಿಳಿದಿರುವ ತಂತ್ರವಾಗಿದೆ, ಆದರೆ ನಾನು ಇದೀಗ ಅದರ ಬಗ್ಗೆ ಮಾತನಾಡಲು ಬಯಸುತ್ತೇನೆ, ಮೊದಲನೆಯದಾಗಿ. ಇದರರ್ಥ ಕೇಂದ್ರೀಕೃತ ಸಮತಲ ಜೋಡಣೆಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಮೂಲ ಅಂಶ. ಇದನ್ನು ಹೇಗೆ ಮಾಡಲಾಗುತ್ತದೆ? ನಾವು ಕಂಟೇನರ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ ಮತ್ತು ನಮ್ಮ ಪ್ರಾಯೋಗಿಕ ವಿಷಯವು ಅದರಲ್ಲಿದೆ ಎಂದು ಹೇಳೋಣ:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
ಇದು ಸೈಟ್ ಹೆಡರ್ ಎಂದು ಭಾವಿಸೋಣ. ಇದು ವಿಂಡೋದ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ವಿಸ್ತರಿಸುವುದಿಲ್ಲ ಮತ್ತು ನಾವು ಅದನ್ನು ಕೇಂದ್ರೀಕರಿಸಬೇಕಾಗಿದೆ. ನಾವು ಈ ರೀತಿ ಬರೆಯುತ್ತೇವೆ:
#ಹೆಡರ್( ಅಗಲ / ಗರಿಷ್ಠ - ಅಗಲ: 800px; ಅಂಚು: 0 ಸ್ವಯಂ; |
ನಾವು ನಿಖರವಾದ ಅಥವಾ ಗರಿಷ್ಠ ಅಗಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ, ತದನಂತರ ಪ್ರಮುಖ ಆಸ್ತಿಯನ್ನು ಬರೆಯಿರಿ - ಅಂಚು: 0 ಸ್ವಯಂ. ಇದು ನಮ್ಮ ಹೆಡರ್‌ನ ಹೊರ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ಮೊದಲ ಮೌಲ್ಯವು ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ ಅಂಚುಗಳನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ ಮತ್ತು ಎರಡನೆಯದು ಬಲ ಮತ್ತು ಎಡ ಅಂಚುಗಳನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಮೌಲ್ಯ ಸ್ವಯಂ ಬ್ರೌಸರ್‌ಗೆ ಎರಡೂ ಬದಿಗಳಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಹೇಳುತ್ತದೆ ಇದರಿಂದ ಅಂಶವು ನಿಖರವಾಗಿ ಪೋಷಕರಲ್ಲಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ. ಆರಾಮದಾಯಕ!
ಪಠ್ಯ ಜೋಡಣೆ
ಇದು ತುಂಬಾ ಸರಳವಾದ ತಂತ್ರವೂ ಆಗಿದೆ. ನೀವು ಬಳಸಬಹುದಾದ ಎಲ್ಲಾ ಇನ್ಲೈನ್ ಅಂಶಗಳನ್ನು ಜೋಡಿಸಲು ಪಠ್ಯ-ಜೋಡಣೆ ಆಸ್ತಿಮತ್ತು ಅದರ ಮೌಲ್ಯಗಳು: ಎಡ, ಬಲ, ಮಧ್ಯ. ಎರಡನೆಯದು ಪಠ್ಯವನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ, ಅದು ನಮಗೆ ಬೇಕಾಗಿರುವುದು. ಅದೇ ರೀತಿಯಲ್ಲಿ, ನೀವು ಚಿತ್ರವನ್ನು ಸಹ ಜೋಡಿಸಬಹುದು, ಏಕೆಂದರೆ ಇದು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿಯೂ ಸಹ ಇನ್ಲೈನ್ ಅಂಶ.
ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಿ
ಆದರೆ ಇದು ಹೆಚ್ಚು ಜಟಿಲವಾಗಿದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಬ್ಲಾಕ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಸುಲಭವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುವ ಯಾವುದೇ ಸರಳವಾದ, ಪ್ರಸಿದ್ಧವಾದ ಆಸ್ತಿ ಇಲ್ಲ. ಆದಾಗ್ಯೂ, ಲೇಔಟ್ ವಿನ್ಯಾಸಕರು ವರ್ಷಗಳಿಂದ ಬಂದಿರುವ ಹಲವಾರು ತಂತ್ರಗಳಿವೆ.
ಪ್ಯಾಡಿಂಗ್ ಬಳಸಿ ಬ್ಲಾಕ್ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ. ಎತ್ತರವನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಪಷ್ಟವಾದ ಎತ್ತರವನ್ನು ಹೊಂದಿಸುವುದು ಮಾರ್ಗವಲ್ಲ, ಆದರೆ ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ಗಳನ್ನು ಬಳಸಿ ಕೃತಕವಾಗಿ ರಚಿಸುವುದು, ಅದು ಒಂದೇ ಆಗಿರಬೇಕು. ನಾವು ಯಾವುದೇ ಬ್ಲಾಕ್ ಅನ್ನು ರಚಿಸೋಣ ಮತ್ತು ಅದಕ್ಕೆ ಈ ಕೆಳಗಿನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬರೆಯೋಣ:
div (ಹಿನ್ನೆಲೆ: #ccc; ಪ್ಯಾಡಿಂಗ್: 30px 0;)
ವಿಭಾಗ ( ಹಿನ್ನೆಲೆ: #ಸಿಸಿಸಿ; ಪ್ಯಾಡಿಂಗ್: 30px 0; |
ಹಿನ್ನೆಲೆಯು ಅಂಚುಗಳನ್ನು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ತೋರಿಸುವುದು. ಈಗ ಬ್ಲಾಕ್ನ ಎತ್ತರವು ಈ ಎರಡು ಇಂಡೆಂಟ್ಗಳು ಮತ್ತು ರೇಖೆಯಿಂದ ಮಾಡಲ್ಪಟ್ಟಿದೆ, ಮತ್ತು ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
ಬ್ಲಾಕ್ಗಾಗಿ ಲೈನ್-ಎತ್ತರವನ್ನು ವಿವರಿಸಿ. ಇದು ಹೆಚ್ಚು ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ ಸರಿಯಾದ ಮಾರ್ಗ, ನೀವು ಪಠ್ಯದ ಒಂದು ಸಾಲನ್ನು ಜೋಡಿಸಬೇಕಾದರೆ. ಇದರೊಂದಿಗೆ, ಎತ್ತರದ ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಎತ್ತರವನ್ನು ಸಾಮಾನ್ಯ ಎಂದು ರೆಕಾರ್ಡ್ ಮಾಡಬಹುದು. ಇದರ ನಂತರ, ಅವನು ರೇಖೆಯ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಬೇಕಾಗಿದೆ, ಒಟ್ಟಾರೆಯಾಗಿ ಬ್ಲಾಕ್ನ ಎತ್ತರದಂತೆಯೇ.
div (ಎತ್ತರ: 60px; ಸಾಲು-ಎತ್ತರ: 60px; )
ವಿಭಾಗ ( ಎತ್ತರ: 60px; ಸಾಲು-ಎತ್ತರ: 60px; |
ಫಲಿತಾಂಶವು ಮೇಲಿನ ಚಿತ್ರದಂತೆಯೇ ಇರುತ್ತದೆ. ನೀವು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸಿದರೂ ಎಲ್ಲವೂ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ, ಒಂದು ಸಾಲಿಗೆ ಮಾತ್ರ. ಅಂಶದಲ್ಲಿ ನಿಮಗೆ ಹೆಚ್ಚಿನ ಪಠ್ಯ ಅಗತ್ಯವಿದ್ದರೆ, ಈ ವಿಧಾನವು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಒಂದು ಬ್ಲಾಕ್ ಅನ್ನು ಟೇಬಲ್ ಸೆಲ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ. ಈ ವಿಧಾನದ ಮೂಲತತ್ವವೆಂದರೆ ಟೇಬಲ್ ಕೋಶವು ಲಂಬ-ಜೋಡಣೆಯನ್ನು ಹೊಂದಿದೆ: ಮಧ್ಯಮ ಆಸ್ತಿ, ಇದು ಅಂಶವನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ. ಅಂತೆಯೇ, ಈ ಸಂದರ್ಭದಲ್ಲಿ ಬ್ಲಾಕ್ ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಹೊಂದಿಸಬೇಕಾಗಿದೆ:
ಡಿವ್ (ಪ್ರದರ್ಶನ: ಟೇಬಲ್-ಸೆಲ್; ಲಂಬ-ಜೋಡಣೆ: ಮಧ್ಯ;)
ವಿಭಾಗ ( ಪ್ರದರ್ಶನ: ಟೇಬಲ್ - ಸೆಲ್; ಲಂಬವಾಗಿ ಜೋಡಿಸು: ಮಧ್ಯದಲ್ಲಿ; |
ಈ ವಿಧಾನವು ಒಳ್ಳೆಯದು ಏಕೆಂದರೆ ನೀವು ಕೇಂದ್ರದಲ್ಲಿ ನೀವು ಇಷ್ಟಪಡುವಷ್ಟು ಪಠ್ಯವನ್ನು ಜೋಡಿಸಬಹುದು. ಆದರೆ ಡಿಸ್ಪ್ಲೇ ಬರೆಯುವುದು ಉತ್ತಮ: ನಮ್ಮ ಡಿವಿ ನೆಸ್ಟ್ ಆಗಿರುವ ಬ್ಲಾಕ್ಗೆ ಟೇಬಲ್, ಇಲ್ಲದಿದ್ದರೆ ಅದು ಕೆಲಸ ಮಾಡದೇ ಇರಬಹುದು.
ಸರಿ, ಇಲ್ಲಿ ನಾವು ಇಂದಿನ ಕೊನೆಯ ತಂತ್ರಕ್ಕೆ ಬರುತ್ತೇವೆ - ಇದು ಬ್ಲಾಕ್ಗಳ ಲಂಬ ಜೋಡಣೆಯಾಗಿದೆ. ಮತ್ತೊಮ್ಮೆ, ಇದಕ್ಕಾಗಿ ನಿರ್ದಿಷ್ಟವಾಗಿ ಉದ್ದೇಶಿಸಿರುವ ಯಾವುದೇ ಆಸ್ತಿ ಇಲ್ಲ ಎಂದು ಹೇಳಬೇಕು, ಆದರೆ ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಕೆಲವು ತಂತ್ರಗಳಿವೆ.
ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಶೇಕಡಾವಾರು ಎಂದು ಹೊಂದಿಸಿ. ನೀವು ಮೂಲ ಅಂಶದ ಎತ್ತರವನ್ನು ತಿಳಿದಿದ್ದರೆ ಮತ್ತು ಅದರೊಳಗೆ ಇನ್ನೊಂದನ್ನು ಇರಿಸಿ ಬ್ಲಾಕ್ ಅಂಶ, ನಂತರ ನೀವು ಶೇಕಡಾವಾರು ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅದನ್ನು ಕೇಂದ್ರೀಕರಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಪೋಷಕರು 600 ಪಿಕ್ಸೆಲ್‌ಗಳ ಎತ್ತರವನ್ನು ಹೊಂದಿದ್ದಾರೆ. ನೀವು ಅದರಲ್ಲಿ 300 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಎತ್ತರದ ಬ್ಲಾಕ್ ಅನ್ನು ಇರಿಸಿ. ಅದನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ನೀವು ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಎಷ್ಟು ಹಿಂದೆ ಸರಿಯಬೇಕು? ತಲಾ 150 ಪಿಕ್ಸೆಲ್‌ಗಳು, ಇದು ಪೋಷಕರ ಎತ್ತರದ 25% ಆಗಿದೆ.
ಆಯಾಮಗಳು ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಅನುಮತಿಸಿದಾಗ ಮಾತ್ರ ಈ ವಿಧಾನವು ಜೋಡಣೆಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಮತ್ತು ನಿಮ್ಮ ಪೋಷಕರು 887 ಪಿಕ್ಸೆಲ್‌ಗಳ ಎತ್ತರದಲ್ಲಿದ್ದರೆ, ನೀವು ಏನನ್ನೂ ನಿಖರವಾಗಿ ರೆಕಾರ್ಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ, ಇದು ಈಗಾಗಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ.
ಟೇಬಲ್ ಕೋಶಕ್ಕೆ ಅಂಶವನ್ನು ಸೇರಿಸಿ. ಮತ್ತೊಮ್ಮೆ, ನಾವು ಮೂಲ ಅಂಶವನ್ನು ಟೇಬಲ್ ಸೆಲ್ ಆಗಿ ಪರಿವರ್ತಿಸಿದರೆ, ಅದರೊಳಗೆ ಸೇರಿಸಲಾದ ಬ್ಲಾಕ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಮಾಡಲು, ಪೋಷಕರು ಕೇವಲ ಲಂಬ-ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸಬೇಕಾಗಿದೆ: ಮಧ್ಯಮ.
ಮತ್ತು ಇದರ ಜೊತೆಗೆ, ನಾವು ಮಾರ್ಜಿನ್ ಅನ್ನು ಸಹ ಬರೆಯುತ್ತೇವೆ: 0 ಸ್ವಯಂ, ಆಗ ಅಂಶವು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ!
ಶುಭ ದಿನ, ಈ ಪ್ರಕಟಣೆಯ ಚಂದಾದಾರರು ಮತ್ತು ಓದುಗರು. ಇಂದು ನಾನು ವಿವರವಾಗಿ ಹೋಗಲು ಬಯಸುತ್ತೇನೆ ಮತ್ತು CSS ನಲ್ಲಿ ಪಠ್ಯವನ್ನು ಕೇಂದ್ರೀಕರಿಸುವುದು ಹೇಗೆ ಎಂದು ಹೇಳಲು ಬಯಸುತ್ತೇನೆ. ಹಿಂದಿನ ಕೆಲವು ಲೇಖನಗಳಲ್ಲಿ ನಾನು ಪರೋಕ್ಷವಾಗಿ ಸ್ಪರ್ಶಿಸಿದ್ದೇನೆ ಈ ವಿಷಯ, ಆದ್ದರಿಂದ ನೀವು ಈ ಪ್ರದೇಶದಲ್ಲಿ ಸ್ವಲ್ಪ ಜ್ಞಾನವನ್ನು ಹೊಂದಿದ್ದೀರಿ.
ಆದಾಗ್ಯೂ, ಈ ಪ್ರಕಟಣೆಯಲ್ಲಿ ನಾನು ನಿಮಗೆ ಹೇಳುತ್ತೇನೆ ಸಾಧ್ಯವಿರುವ ಎಲ್ಲಾ ರೀತಿಯಲ್ಲಿವಸ್ತುಗಳ ಜೋಡಣೆ, ಮತ್ತು ಪ್ಯಾರಾಗಳಲ್ಲಿ ಇಂಡೆಂಟ್ ಮತ್ತು ಕೆಂಪು ಗೆರೆಗಳನ್ನು ಹೇಗೆ ವಿವರಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ ವಸ್ತುವನ್ನು ಕಲಿಯಲು ಪ್ರಾರಂಭಿಸೋಣ!
HTML ಮತ್ತು ಅದರ ಸಂತತಿ ಮತ್ತು ಜೋಡಿಸಿ
ಈ ವಿಧಾನವನ್ನು ಬಹುತೇಕ ಎಂದಿಗೂ ಬಳಸಲಾಗುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಇದನ್ನು ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ ಪರಿಕರಗಳಿಂದ ಬದಲಾಯಿಸಲಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಅಂತಹ ಟ್ಯಾಗ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ನಿಮಗೆ ಹಾನಿಯಾಗುವುದಿಲ್ಲ.
ಮೌಲ್ಯೀಕರಣಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ( ಈ ಪದ"" ಲೇಖನದಲ್ಲಿ ವಿವರವಾಗಿ ವಿವರಿಸಲಾಗಿದೆ), ನಂತರ html ವಿವರಣೆಯು ಸ್ವತಃ ಬಳಕೆಯನ್ನು ಖಂಡಿಸುತ್ತದೆ < ಕೇಂದ್ರ>, ಮಾನ್ಯತೆಗಾಗಿ ಪರಿವರ್ತನೆಯನ್ನು ಬಳಸುವುದು ಅವಶ್ಯಕ ಡಾಕ್ಟೈಪ್>.
ಈ ರೀತಿಯನಿಷೇಧಿತ ಅಂಶಗಳನ್ನು ಹಾದುಹೋಗಲು ಅನುಮತಿಸುತ್ತದೆ.
ಈಗ ಗುಣಲಕ್ಷಣಕ್ಕೆ ಹೋಗೋಣ ಜೋಡಿಸು. ಇದು ವಸ್ತುಗಳ ಸಮತಲ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಟ್ಯಾಗ್ ಘೋಷಣೆಯ ನಂತರ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ವಿಶಿಷ್ಟವಾಗಿ, ವಿಷಯವನ್ನು ಎಡಕ್ಕೆ ಜೋಡಿಸಲು ಇದನ್ನು ಬಳಸಬಹುದು ( ಬಿಟ್ಟರು), ಬಲ ಅಂಚಿನಲ್ಲಿ ( ಬಲ), ಕೇಂದ್ರಿತ ( ಕೇಂದ್ರ) ಮತ್ತು ಪಠ್ಯದ ಅಗಲದಿಂದ ( ಸಮರ್ಥಿಸಿಕೊಳ್ಳಿ).
ಕೆಳಗೆ ನಾನು ಚಿತ್ರ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಕೇಂದ್ರದಲ್ಲಿ ಇರಿಸುವ ಉದಾಹರಣೆಯನ್ನು ನೀಡುತ್ತೇನೆ.
ಈ ವಿಷಯವು ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ.
ಚಿತ್ರಕ್ಕಾಗಿ ನಾವು ವಿಶ್ಲೇಷಿಸುತ್ತಿರುವ ಗುಣಲಕ್ಷಣವು ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ಅರ್ಥಗಳನ್ನು ಹೊಂದಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ.
ನಾನು ಬಳಸಿದ ಉದಾಹರಣೆಯಲ್ಲಿ ಜೋಡಿಸು="ಮಧ್ಯಮ". ಇದಕ್ಕೆ ಧನ್ಯವಾದಗಳು, ಚಿತ್ರವನ್ನು ಜೋಡಿಸಲಾಗಿದೆ ಆದ್ದರಿಂದ ವಾಕ್ಯವು ಚಿತ್ರದ ಮಧ್ಯದಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಇದೆ.
css ನಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸುವ ಉಪಕರಣಗಳು
CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬ್ಲಾಕ್ ಜೋಡಣೆಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಪಠ್ಯ ಮತ್ತು ಗ್ರಾಫಿಕ್ ವಿಷಯ, ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಪ್ರಾಥಮಿಕವಾಗಿ ಅನುಷ್ಠಾನದ ಶೈಲಿಗಳ ಅನುಕೂಲತೆ ಮತ್ತು ನಮ್ಯತೆಯಿಂದಾಗಿ.
ಆದ್ದರಿಂದ ಪಠ್ಯ ಕೇಂದ್ರೀಕರಣದ ಮೊದಲ ಆಸ್ತಿಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ - ಇದು ಪಠ್ಯ-ಜೋಡಿಸು.
ಇದು align in ರೀತಿಯಲ್ಲಿಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಕೀವರ್ಡ್‌ಗಳಲ್ಲಿ, ನೀವು ಸಾಮಾನ್ಯ ಪಟ್ಟಿಯಿಂದ ಒಂದನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು ಅಥವಾ ಪೂರ್ವಜರ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬಹುದು ( ಆನುವಂಶಿಕವಾಗಿ).
css3 ನಲ್ಲಿ ನೀವು ಇನ್ನೂ 2 ನಿಯತಾಂಕಗಳನ್ನು ಹೊಂದಿಸಬಹುದು ಎಂದು ನಾನು ಗಮನಿಸಲು ಬಯಸುತ್ತೇನೆ: ಪ್ರಾರಂಭಿಸಿ- ಪಠ್ಯವನ್ನು ಬರೆಯುವ ನಿಯಮಗಳನ್ನು ಅವಲಂಬಿಸಿ (ಬಲದಿಂದ ಎಡಕ್ಕೆ ಅಥವಾ ಪ್ರತಿಯಾಗಿ), ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಕೆಲಸ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಹೋಲುತ್ತದೆ) ಮತ್ತು ಅಂತ್ಯ- ಪ್ರಾರಂಭದ ವಿರುದ್ಧ (ಎಡದಿಂದ ಬಲಕ್ಕೆ ಪಠ್ಯವನ್ನು ಬರೆಯುವಾಗ ಅದು ಬಲವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಬಲದಿಂದ ಎಡಕ್ಕೆ ಬರೆಯುವಾಗ - ಎಡಕ್ಕೆ).
ಬಲಭಾಗದಲ್ಲಿ ವಾಕ್ಯ
ಅಂತ್ಯವನ್ನು ಬಳಸುವ ವಾಕ್ಯ
ನಾನು ನಿಮಗೆ ಒಂದು ಸಣ್ಣ ಟ್ರಿಕ್ ಬಗ್ಗೆ ಹೇಳುತ್ತೇನೆ. ಮೌಲ್ಯವನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ ಸಮರ್ಥಿಸಿಕೊಳ್ಳಿ ಕೊನೆಯ ಸಾಲುಕೆಳಗಿನಿಂದ ಅಸಹ್ಯವಾಗಿ ತೂಗಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ಅದನ್ನು ಕೇಂದ್ರದಲ್ಲಿ ಇರಿಸಲು, ನೀವು ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದು ಪಠ್ಯ-ಜೋಡಣೆ-ಕೊನೆಯ.
ಸೈಟ್ ವಿಷಯ ಅಥವಾ ಟೇಬಲ್ ಸೆಲ್‌ಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲು, ಆಸ್ತಿಯನ್ನು ಬಳಸಿ ಲಂಬವಾಗಿ ಜೋಡಿಸಿ. ಕೆಳಗೆ ನಾನು ಮುಖ್ಯವನ್ನು ವಿವರಿಸಿದ್ದೇನೆ ಕೀವರ್ಡ್ಗಳುಅಂಶ.
| ಕೀವರ್ಡ್ | ಉದ್ದೇಶ |
| ಬೇಸ್ಲೈನ್ | ಮೂಲ ರೇಖೆ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಪೂರ್ವಜರ ರೇಖೆಗೆ ಜೋಡಣೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಪೂರ್ವಜರ ವಸ್ತುವು ಅಂತಹ ರೇಖೆಯನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಕೆಳಗಿನ ಗಡಿಯಲ್ಲಿ ಜೋಡಣೆ ಸಂಭವಿಸುತ್ತದೆ. |
| ಮಧ್ಯಮ | ರೂಪಾಂತರಿತ ವಸ್ತುವಿನ ಮಧ್ಯಭಾಗವು ಬೇಸ್ಲೈನ್ಗೆ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುತ್ತದೆ, ಇದಕ್ಕೆ ಮೂಲ ಅಂಶದ ಎತ್ತರದ ನೆಲವನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ. |
| ಕೆಳಗೆ | ಆಯ್ಕೆಮಾಡಿದ ವಿಷಯದ ಕೆಳಭಾಗವು ಅದರ ಕೆಳಗಿನ ವಸ್ತುವಿನ ಕೆಳಭಾಗಕ್ಕೆ ಸರಿಹೊಂದಿಸುತ್ತದೆ. |
| ಮೇಲ್ಭಾಗ | ಕೆಳಭಾಗಕ್ಕೆ ಹೋಲುತ್ತದೆ, ಜೊತೆಗೆ ಮಾತ್ರ ಮೇಲಿನ ಭಾಗವಸ್ತು. |
| ಸೂಪರ್ | ಪಾತ್ರವನ್ನು ಸೂಪರ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡುತ್ತದೆ. |
| ಉಪ | ಅಂಶ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡುತ್ತದೆ. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ಸಿ INಇ ಟಿಬಗ್ಗೆTO
|
ಇಂಡೆಂಟೇಶನ್‌ಗಳು
ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಾವು ಪ್ಯಾರಾಗ್ರಾಫ್ ಇಂಡೆಂಟ್‌ಗಳಿಗೆ ಬರುತ್ತೇವೆ. IN css ಭಾಷೆಎಂಬ ವಿಶೇಷ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತದೆ ಪಠ್ಯ-ಇಂಡೆಂಟ್.
ಅದರ ಸಹಾಯದಿಂದ ನೀವು ಕೆಂಪು ರೇಖೆ ಮತ್ತು ಮುಂಚಾಚಿರುವಿಕೆ ಎರಡನ್ನೂ ಮಾಡಬಹುದು (ನೀವು ನಕಾರಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ).
ಕೆಂಪು ರೇಖೆಯನ್ನು ರಚಿಸಲು ನೀವು ಕೇವಲ ಒಂದು ನಿಯತಾಂಕವನ್ನು ತಿಳಿದುಕೊಳ್ಳಬೇಕು.
ಇದು ಸರಳ ಪಠ್ಯ-ಇಂಡೆಂಟ್ ಆಸ್ತಿಯಾಗಿದೆ.
ಆಚರಣೆಯಲ್ಲಿ ಪ್ರತಿ ಉದಾಹರಣೆಯನ್ನು ಪ್ರಯತ್ನಿಸಿದವರನ್ನು ನಾನು ಪ್ರಶಂಸಿಸುತ್ತೇನೆ. ನಿಮ್ಮ ಸ್ನೇಹಿತರಿಗೆ ನನ್ನ ಬ್ಲಾಗ್‌ಗೆ ಲಿಂಕ್‌ಗಳನ್ನು ಕಳುಹಿಸಿ ಮತ್ತು ಚಂದಾದಾರರಾಗಲು ಮರೆಯಬೇಡಿ. ಶುಭವಾಗಲಿ! ಬೈ ಬೈ!
ಶುಭಾಶಯಗಳು, ರೋಮನ್ ಚುಶೋವ್
ಓದಿ: 675 ಬಾರಿ
ಆಗಾಗ್ಗೆ ಕಾರ್ಯವು ಪುಟ / ಪರದೆಯ ಮಧ್ಯದಲ್ಲಿ ಒಂದು ಬ್ಲಾಕ್ ಅನ್ನು ಜೋಡಿಸುವುದು, ಮತ್ತು ಜಾವಾ ಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ, ಕಾರ್ಯವಿಲ್ಲದೆ ಕಟ್ಟುನಿಟ್ಟಾದ ಗಾತ್ರಗಳುಅಥವಾ ಋಣಾತ್ಮಕ ಇಂಡೆಂಟ್ಗಳು, ಆದ್ದರಿಂದ ಬ್ಲಾಕ್ ಅದರ ಗಾತ್ರವನ್ನು ಮೀರಿದರೆ ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳು ಪೋಷಕರಿಗೆ ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಪರದೆಯ ಮಧ್ಯಭಾಗಕ್ಕೆ ಬ್ಲಾಕ್ ಅನ್ನು ಹೇಗೆ ಜೋಡಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಅಂತರ್ಜಾಲದಲ್ಲಿ ಸಾಕಷ್ಟು ಏಕತಾನತೆಯ ಉದಾಹರಣೆಗಳಿವೆ. ನಿಯಮದಂತೆ, ಅವುಗಳಲ್ಲಿ ಹೆಚ್ಚಿನವು ಒಂದೇ ತತ್ವಗಳನ್ನು ಆಧರಿಸಿವೆ.
ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಮುಖ್ಯ ಮಾರ್ಗಗಳು, ಅವುಗಳ ಸಾಧಕ-ಬಾಧಕಗಳನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ. ಉದಾಹರಣೆಗಳ ಸಾರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ಒದಗಿಸಿದ ಲಿಂಕ್‌ಗಳಲ್ಲಿನ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಫಲಿತಾಂಶ ವಿಂಡೋದ ಎತ್ತರ/ಅಗಲವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಾನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ.
ಆಯ್ಕೆ 1: ಋಣಾತ್ಮಕ ಇಂಡೆಂಟೇಶನ್.
ಸ್ಥಾನೀಕರಣ ಬ್ಲಾಕ್ಮೇಲಿನ ಮತ್ತು ಎಡ ಗುಣಲಕ್ಷಣಗಳನ್ನು 50% ರಷ್ಟು ಬಳಸಿ, ಮತ್ತು ಬ್ಲಾಕ್ನ ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ಮುಂಚಿತವಾಗಿ ತಿಳಿದುಕೊಳ್ಳಿ, ಋಣಾತ್ಮಕ ಅಂಚನ್ನು ಹೊಂದಿಸಿ, ಇದು ಗಾತ್ರದ ಅರ್ಧದಷ್ಟು ಸಮಾನವಾಗಿರುತ್ತದೆ ಬ್ಲಾಕ್. ಒಂದು ದೊಡ್ಡ ಮೈನಸ್ ಈ ಆಯ್ಕೆಯನ್ನುನೀವು ಋಣಾತ್ಮಕ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಎಣಿಸಬೇಕಾಗಿದೆ. ಅಲ್ಲದೆ ಬ್ಲಾಕ್ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳಿಂದ ಸುತ್ತುವರೆದಿರುವಾಗ ಸರಿಯಾಗಿ ವರ್ತಿಸುವುದಿಲ್ಲ - ಇದು ಋಣಾತ್ಮಕ ಅಂಚುಗಳನ್ನು ಹೊಂದಿರುವ ಕಾರಣ ಅದನ್ನು ಸರಳವಾಗಿ ಕತ್ತರಿಸಲಾಗುತ್ತದೆ.
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ) .ಬ್ಲಾಕ್ (ಅಗಲ: 250px; ಎತ್ತರ: 250px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 50%; ಎಡ : 50%; ಅಂಚು: -125px 0 0 -125px (ಗರಿಷ್ಠ ಅಗಲ: 100%; ಎತ್ತರ: ಸ್ವಯಂ; ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಅಂಚು: 0 ಸ್ವಯಂ; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ;
ಆಯ್ಕೆ 2. ಸ್ವಯಂಚಾಲಿತ ಇಂಡೆಂಟೇಶನ್.
ಕಡಿಮೆ ಸಾಮಾನ್ಯ, ಆದರೆ ಮೊದಲನೆಯದನ್ನು ಹೋಲುತ್ತದೆ. ಫಾರ್ ಬ್ಲಾಕ್ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ, ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮೇಲಿನ ಬಲ ಕೆಳಗಿನ ಎಡಕ್ಕೆ 0 ಗೆ ಇರಿಸಿ ಮತ್ತು ಹೊಂದಿಸಿ ಮಾರ್ಜಿನ್ ಸ್ವಯಂ. ಈ ಆಯ್ಕೆಯ ಪ್ರಯೋಜನವೆಂದರೆ ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಪೋಷಕ, ಎರಡನೆಯದು 100% ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿದ್ದರೆ. ಈ ವಿಧಾನದ ಅನನುಕೂಲವೆಂದರೆ ಆಯಾಮಗಳ ಕಟ್ಟುನಿಟ್ಟಾದ ಸೆಟ್ಟಿಂಗ್.
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ) .ಬ್ಲಾಕ್ (ಅಗಲ: 250px; ಎತ್ತರ: 250px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಬಲ: 0; ಕೆಳಗೆ: 0; ಅಂಚು: ಸ್ವಯಂ; ಎತ್ತರ: ಸ್ವಯಂ; ಪ್ರದರ್ಶನ: 0 ಸ್ವಯಂ;
ಆಯ್ಕೆ 3. ಟೇಬಲ್.
ಕೇಳೋಣ ಪೋಷಕಟೇಬಲ್ ಶೈಲಿಗಳು, ಕೋಶ ಪೋಷಕಪಠ್ಯದ ಜೋಡಣೆಯನ್ನು ಮಧ್ಯಕ್ಕೆ ಹೊಂದಿಸಿ. ಎ ಬ್ಲಾಕ್ನಾವು ಲೈನ್ ಬ್ಲಾಕ್ ಮಾದರಿಯನ್ನು ಹೊಂದಿಸಿದ್ದೇವೆ. ನಾವು ಪಡೆಯುವ ಅನಾನುಕೂಲಗಳು ಕೆಲಸ ಮಾಡದ ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳು, ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ, ಟೇಬಲ್ "ಎಮ್ಯುಲೇಶನ್" ನ ಸೌಂದರ್ಯಶಾಸ್ತ್ರವು ಉತ್ತಮವಾಗಿಲ್ಲ.
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಪ್ರದರ್ಶನ: ಟೇಬಲ್; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; > .ಒಳಗಿನ (ಪ್ರದರ್ಶನ: ಟೇಬಲ್-ಸೆಲ್; ಪಠ್ಯ-ಜೋಡಣೆ: ಕೇಂದ್ರ; ಲಂಬ-ಜೋಡಣೆ: ಮಧ್ಯ; ) .ಬ್ಲಾಕ್ (ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್; img (ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ;) )
ಈ ಉದಾಹರಣೆಗೆ ಸ್ಕ್ರಾಲ್ ಅನ್ನು ಸೇರಿಸಲು, ನೀವು ವಿನ್ಯಾಸಕ್ಕೆ ಇನ್ನೂ ಒಂದು ಅಂಶವನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ: jsfiddle.net/serdidg/fk5nqh52/3.
ಆಯ್ಕೆ 4. ಹುಸಿ-ಅಂಶ.
ಈ ಆಯ್ಕೆಯು ಹಿಂದಿನ ವಿಧಾನಗಳಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಎಲ್ಲಾ ಸಮಸ್ಯೆಗಳಿಂದ ದೂರವಿರುತ್ತದೆ ಮತ್ತು ಮೂಲ ಸಮಸ್ಯೆಗಳನ್ನು ಸಹ ಪರಿಹರಿಸುತ್ತದೆ. ವಿಷಯವೇನೆಂದರೆ ಪೋಷಕಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸಿ ಹುಸಿ ಅಂಶಮೊದಲು, ಅವುಗಳೆಂದರೆ 100% ಎತ್ತರ, ಕೇಂದ್ರ ಜೋಡಣೆ ಮತ್ತು ಇನ್ಲೈನ್ ಬ್ಲಾಕ್ ಮಾದರಿ. ಇದು ಒಂದೇ ಆಗಿರುತ್ತದೆ ಬ್ಲಾಕ್ಲೈನ್ ಬ್ಲಾಕ್ ಮಾದರಿಯನ್ನು ಇರಿಸಲಾಗಿದೆ, ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ. ಗೆ ಬ್ಲಾಕ್ಕೆಳಗೆ "ಬೀಳಲಿಲ್ಲ" ಹುಸಿ ಅಂಶ, ಮೊದಲನೆಯ ಆಯಾಮಗಳು ಹೆಚ್ಚಿರುವಾಗ ಪೋಷಕ, ಸೂಚಿಸಿ ಪೋಷಕವೈಟ್-ಸ್ಪೇಸ್: ನೌರಾಪ್ ಮತ್ತು ಫಾಂಟ್-ಗಾತ್ರ: 0, ಅದರ ನಂತರ ಬ್ಲಾಕ್ಕೆಳಗಿನವುಗಳೊಂದಿಗೆ ಈ ಶೈಲಿಗಳನ್ನು ರದ್ದುಗೊಳಿಸಿ - ವೈಟ್-ಸ್ಪೇಸ್: ಸಾಮಾನ್ಯ. IN ಈ ಉದಾಹರಣೆಯಲ್ಲಿಫಾಂಟ್ ಗಾತ್ರ: 0 ನಡುವಿನ ಅಂತರವನ್ನು ತೆಗೆದುಹಾಕಲು ಅಗತ್ಯವಿದೆ ಪೋಷಕಮತ್ತು ಬ್ಲಾಕ್ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಕಾರಣ. ಜಾಗವನ್ನು ಇತರ ರೀತಿಯಲ್ಲಿ ತೆಗೆದುಹಾಕಬಹುದು, ಆದರೆ ಅದನ್ನು ಸರಳವಾಗಿ ತಪ್ಪಿಸಲು ಉತ್ತಮವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ವೈಟ್-ಸ್ಪೇಸ್: ನೌರಾಪ್; ಪಠ್ಯ-ಜೋಡಣೆ: ಮಧ್ಯ; ಫಾಂಟ್-ಗಾತ್ರ: 0; &: ಮೊದಲು ( ಎತ್ತರ: 100%;
ಅಥವಾ, ನಿಮಗೆ ಪೋಷಕರು ವಿಂಡೋದ ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ಮಾತ್ರ ತೆಗೆದುಕೊಳ್ಳಬೇಕಾದರೆ, ಮತ್ತು ಸಂಪೂರ್ಣ ಪುಟವಲ್ಲ:
ಪೋಷಕ (ಸ್ಥಾನ: ಸ್ಥಿರ; ಮೇಲ್ಭಾಗ: 0; ಬಲ: 0; ಕೆಳಗೆ: 0; ಎಡ: 0; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ವೈಟ್-ಸ್ಪೇಸ್: ನೌರಾಪ್; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಫಾಂಟ್-ಗಾತ್ರ: 0; &: ಮೊದಲು (ಎತ್ತರ: 100% ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್: ವಿಷಯ: ""
ಆಯ್ಕೆ 5. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್.
ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಬಳಸುವುದು ಸರಳ ಮತ್ತು ಅತ್ಯಂತ ಸೊಗಸಾದ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಇದು ಅನಗತ್ಯ ದೇಹದ ಚಲನೆಗಳ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ, ಏನಾಗುತ್ತಿದೆ ಎಂಬುದರ ಸಾರವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವಿವರಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಮೃದುವಾಗಿರುತ್ತದೆ. ಆಯ್ಕೆಮಾಡುವಾಗ ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಏಕೈಕ ವಿಷಯ ಈ ವಿಧಾನ- ಆವೃತ್ತಿ 10 ರಿಂದ IE ಗೆ ಬೆಂಬಲ. caniuse.com/#feat=flexbox
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಸ್ಥಾನ: ಸ್ಥಿರ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಪ್ರದರ್ಶನ: ಫ್ಲೆಕ್ಸ್; ಜೋಡಿಸು-ಐಟಂಗಳು: ಕೇಂದ್ರ; ಅಲೈನ್-ವಿಷಯ: ಕೇಂದ್ರ; ಸಮರ್ಥನೆ-ವಿಷಯ: ಕೇಂದ್ರ; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ) .block (ಹಿನ್ನೆಲೆ: #60a839; img (ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ;) )
ಆಯ್ಕೆ 6. ರೂಪಾಂತರ.
ನಾವು ರಚನೆಯಿಂದ ಸೀಮಿತವಾಗಿದ್ದರೆ ಸೂಕ್ತವಾಗಿದೆ, ಮತ್ತು ಮೂಲ ಅಂಶವನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಯಾವುದೇ ಮಾರ್ಗವಿಲ್ಲ, ಆದರೆ ಬ್ಲಾಕ್ ಅನ್ನು ಹೇಗಾದರೂ ಜೋಡಿಸಬೇಕಾಗಿದೆ. ನೆರವಿಗೆ ಬರುತ್ತಾರೆ css ಕಾರ್ಯಅನುವಾದ () . ಮೌಲ್ಯದಲ್ಲಿ 50% ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣಬ್ಲಾಕ್‌ನ ಮೇಲಿನ ಎಡ ಮೂಲೆಯನ್ನು ನಿಖರವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ, ನಂತರ ಋಣಾತ್ಮಕ ಭಾಷಾಂತರ ಮೌಲ್ಯವು ಬ್ಲಾಕ್ ಅನ್ನು ಅದರ ಸ್ವಂತಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಚಲಿಸುತ್ತದೆ ಸ್ವಂತ ಗಾತ್ರಗಳು. ಋಣಾತ್ಮಕ ಪರಿಣಾಮಗಳು ಮಸುಕಾಗಿರುವ ಅಂಚುಗಳು ಅಥವಾ ಫಾಂಟ್ ಶೈಲಿಯ ರೂಪದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಅಲ್ಲದೆ, ಈ ವಿಧಾನವು ಜಾವಾ-ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಬ್ಲಾಕ್ನ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವಲ್ಲಿ ಕೆಲವೊಮ್ಮೆ 50% ನಷ್ಟು ಅಗಲದ ನಷ್ಟವನ್ನು ಸರಿದೂಗಿಸಲು ಕಾರಣವಾಗಬಹುದು css ಬಳಸಿ ಬಿಟ್ಟುಹೋದ ಗುಣಲಕ್ಷಣಗಳುಬ್ಲಾಕ್ಗಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ನಿಯಮವು ಸಹಾಯ ಮಾಡಬಹುದು: ಅಂಚು-ಬಲ: -50%; .
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಸ್ಥಾನ: ಸ್ಥಿರ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ) .ಬ್ಲಾಕ್ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 50%; ಎಡ: 50%; ರೂಪಾಂತರ: ಭಾಷಾಂತರಿಸಿ ( -50%, -50% (ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ) )
ಆಯ್ಕೆ 7. ಬಟನ್.
ಬಳಕೆದಾರ ಆಯ್ಕೆ ಎಲ್ಲಿ ಬ್ಲಾಕ್ಬಟನ್ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ರೂಪಿಸಲಾಗಿದೆ. ಬಟನ್ ಅದರೊಳಗೆ ಇರುವ ಎಲ್ಲವನ್ನೂ ಕೇಂದ್ರೀಕರಿಸುವ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿದೆ, ಅವುಗಳೆಂದರೆ ಇನ್ಲೈನ್ ಮತ್ತು ಬ್ಲಾಕ್-ಲೈನ್ (ಇನ್ಲೈನ್-ಬ್ಲಾಕ್) ಮಾದರಿಯ ಅಂಶಗಳು. ಪ್ರಾಯೋಗಿಕವಾಗಿ ನಾನು ಅದನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ.
ಪೋಷಕ (ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಓವರ್‌ಫ್ಲೋ: ಸ್ವಯಂ; ಹಿನ್ನೆಲೆ: ಯಾವುದೂ ಇಲ್ಲ; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ; ಔಟ್‌ಲೈನ್: ಯಾವುದೂ ಇಲ್ಲ; . ಬ್ಲಾಕ್ (ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್; img (ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್;; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ;) )
ಬೋನಸ್
4 ನೇ ಆಯ್ಕೆಯ ಕಲ್ಪನೆಯನ್ನು ಬಳಸಿಕೊಂಡು, ನೀವು ಬಾಹ್ಯ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸಬಹುದು ಬ್ಲಾಕ್, ಮತ್ತು ಎರಡನೆಯದನ್ನು ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳಿಂದ ಸುತ್ತುವರಿದ ಸಮರ್ಪಕವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.ಉದಾಹರಣೆ: jsfiddle.net/serdidg/nfqg9rza/2.
ನೀವು ಚಿತ್ರವನ್ನು ಮಧ್ಯಕ್ಕೆ ಜೋಡಿಸಬಹುದು ಮತ್ತು ಚಿತ್ರವು ದೊಡ್ಡದಾಗಿದ್ದರೆ ಪೋಷಕ, ಅದನ್ನು ಗಾತ್ರಕ್ಕೆ ಅಳೆಯಿರಿ ಪೋಷಕ.
ಉದಾಹರಣೆ: jsfiddle.net/serdidg/nfqg9rza/3.
ದೊಡ್ಡ ಚಿತ್ರದೊಂದಿಗೆ ಉದಾಹರಣೆ:
ವೆಬ್‌ಸೈಟ್ ಪುಟಗಳ ಲೇಔಟ್ ಮತ್ತು ಮಧ್ಯದ ಜೋಡಣೆಯು ಸೃಜನಾತ್ಮಕ ಪ್ರಯತ್ನವಾಗಿದೆ ಮತ್ತು ಆಗಾಗ್ಗೆ ಆರಂಭಿಕರಿಗಾಗಿ ತೊಂದರೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ. ಹಾಗಾದರೆ ಅದನ್ನು ಹೇಗೆ ಮಾಡಬೇಕೆಂದು ನೋಡೋಣ. ನಾವು ಈ ಕೆಳಗಿನ ರಚನೆಯೊಂದಿಗೆ ಪುಟವನ್ನು ಮಾಡಲು ಬಯಸುತ್ತೇವೆ ಎಂದು ಹೇಳೋಣ:
ನಮ್ಮ ಪುಟವು ನಾಲ್ಕು ಬ್ಲಾಕ್ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ: ಹೆಡರ್, ಮೆನು, ವಿಷಯ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ. ಪುಟವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು, ನಾವು ಈ ನಾಲ್ಕು ಬ್ಲಾಕ್ಗಳನ್ನು ಒಂದು ಮುಖ್ಯ ಬ್ಲಾಕ್ಗೆ ಹಾಕುತ್ತೇವೆ:
ಸೈಟ್ ಹೆಡರ್
ವಿಷಯ
ಸೈಟ್ನ ಕೆಳಭಾಗ
ಈ ರಚನೆಯನ್ನು ಉದಾಹರಣೆಯಾಗಿ ಬಳಸಿ, ನಾವು ಹಲವಾರು ಆಯ್ಕೆಗಳನ್ನು ಪರಿಗಣಿಸುತ್ತೇವೆ.
ರಬ್ಬರ್ ಸೈಟ್ನ ಲೇಔಟ್ ಮತ್ತು ಕೇಂದ್ರೀಕರಣ
ರಬ್ಬರ್ ಸೈಟ್ ಅನ್ನು ಹಾಕಿದಾಗ, ಮಾಪನದ ಮುಖ್ಯ ಘಟಕವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ -%, ಏಕೆಂದರೆ ಸೈಟ್ ಅಗಲವಾಗಿ ವಿಸ್ತರಿಸಬೇಕು ಮತ್ತು ಎಲ್ಲಾ ಮುಕ್ತ ಜಾಗವನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳಬೇಕು.
ಆದ್ದರಿಂದ, "ಹೆಡರ್" ಮತ್ತು "ಫೂಟರ್" ಬ್ಲಾಕ್ಗಳ ಅಗಲವು ಪರದೆಯ ಅಗಲದ 100% ಆಗಿರುತ್ತದೆ. "ಮೆನು" ಬ್ಲಾಕ್ನ ಅಗಲವು 30% ಆಗಿರಲಿ, ಮತ್ತು "ವಿಷಯ" ಬ್ಲಾಕ್ ಅನ್ನು "ಮೆನು" ಬ್ಲಾಕ್ನ ಪಕ್ಕದಲ್ಲಿ ಇರಿಸಬೇಕು, ಅಂದರೆ. ಇದು "ಮೆನು" ಬ್ಲಾಕ್ನ ಅಗಲಕ್ಕೆ ಸಮಾನವಾದ ಅಗಲದೊಂದಿಗೆ ಎಡ ಅಂಚು (ಅಂಚು-ಎಡ) ಹೊಂದಿರಬೇಕು, ಅಂದರೆ. 30%.
"ಮೆನು" ಮತ್ತು "ವಿಷಯ" ಬ್ಲಾಕ್ಗಳನ್ನು ಪರಸ್ಪರ ಪಕ್ಕದಲ್ಲಿ ಕುಳಿತುಕೊಳ್ಳುವಂತೆ ಮಾಡಲು, "ಮೆನು" ಬ್ಲಾಕ್ ಅನ್ನು ತೇಲುವಂತೆ ಮಾಡೋಣ ಮತ್ತು ಎಡ ಅಂಚಿಗೆ ತಳ್ಳೋಣ. ನಾವು ನಮ್ಮ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳನ್ನು ಸಹ ಹೊಂದಿಸುತ್ತೇವೆ. ಈಗ ಇದನ್ನೆಲ್ಲ ಸ್ಟೈಲ್ ಶೀಟ್‌ನಲ್ಲಿ ಬರೆಯೋಣ (style.css ಪುಟದಲ್ಲಿ)
#ಹೆಡರ್ (ಹಿನ್ನೆಲೆ:#3e4982; ಅಗಲ:100%; ಎತ್ತರ:110px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಮಧ್ಯ; ಬಣ್ಣ:#FFFFFF; ಫಾಂಟ್-ಗಾತ್ರ:24px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್:40px; ) #ಮೆನು(ಹಿನ್ನೆಲೆ:#6173cb; ಫ್ಲೋಟ್ :ಎಡ;ಅಗಲ:300px;ಫಾಂಟ್-ಗಾತ್ರ:18px; #3e4982;ಎರಡು;ಎತ್ತರ:50px;#FFFFFF;
ಬ್ಲಾಕ್ಗಳ ಎತ್ತರವನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆ ಇದರಿಂದ ಫಲಿತಾಂಶವು ಗೋಚರಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಮ್ಮ ಪುಟವನ್ನು ನೋಡಿ:
ನೀವು ಬ್ರೌಸರ್ ವಿಂಡೋದ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಎಲ್ಲಾ ಬ್ಲಾಕ್ಗಳ ಅಗಲವು ಬದಲಾಗುತ್ತದೆ. ಇದು ಯಾವಾಗಲೂ ಅನುಕೂಲಕರವಾಗಿಲ್ಲ, ಏಕೆಂದರೆ ... ಮೆನು ಬ್ಲಾಕ್ ಅನ್ನು ವಿಸ್ತರಿಸಿದಾಗ, ಖಾಲಿ ಜಾಗವು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಆದ್ದರಿಂದ, "ಮೆನು" ಬ್ಲಾಕ್ನ ಅಗಲವನ್ನು ಹೆಚ್ಚಾಗಿ ನಿವಾರಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ನಾವು ಅದೇ ರೀತಿ ಮಾಡೋಣ. ಇದನ್ನು ಮಾಡಲು, ಸ್ಟೈಲ್ ಶೀಟ್‌ನಲ್ಲಿ ಅನುಗುಣವಾದ ಗುಣಲಕ್ಷಣಗಳ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸಿ:
... #ಮೆನು (ಹಿನ್ನೆಲೆ:#6173cb; ಫ್ಲೋಟ್:ಎಡ; ಅಗಲ:200px; ಎತ್ತರ:300px; ) #ವಿಷಯ(ಹಿನ್ನೆಲೆ:#ffffff; ಅಂಚು-ಎಡ:200px; ಎತ್ತರ:300px; ) ...
ಈಗ ನಮ್ಮ ಪುಟವು ಹೆಚ್ಚು ನೈಸರ್ಗಿಕವಾಗಿ ವಿಸ್ತರಿಸುತ್ತದೆ. ನಲ್ಲಿ ರಬ್ಬರ್ ಲೇಔಟ್ಪುಟಗಳು ಪರದೆಯ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ, ಆದ್ದರಿಂದ ಪುಟ ಜೋಡಣೆ ಅಗತ್ಯವಿಲ್ಲ.
ಆದರೆ ನೀವು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಪುಟವು ಪರದೆಯ ಎಡ ಮತ್ತು ಬಲಭಾಗದಲ್ಲಿ ಸಮಾನ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೊಂದುವಂತೆ ಮಾಡಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ನೀವು "ಮುಖ್ಯ" ಬ್ಲಾಕ್ಗೆ ಶೈಲಿಯನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ, ಇದು ಎಲ್ಲಾ ಇತರ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಧಾರಕವಾಗಿದೆ:
ಈಗ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
ಸೈಟ್ನ ಲೇಔಟ್ ಮತ್ತು ಕೇಂದ್ರೀಕರಣ, ಸ್ಥಿರ ಅಗಲ
ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಕೇಳಬೇಕು ಸ್ಥಿರ ಗಾತ್ರಗಳುನಮ್ಮ ಬ್ಲಾಕ್‌ಗಳು:
#ಮುಖ್ಯ (ಅಗಲ:800px; ) #ಹೆಡರ್ (ಹಿನ್ನೆಲೆ:#3e4982; ಅಗಲ:800px; ಎತ್ತರ:150px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಮಧ್ಯ; ಬಣ್ಣ:#FFFFFF; ಫಾಂಟ್-ಗಾತ್ರ:24px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್:40px; ) #ಮೆನು (ಹಿನ್ನೆಲೆ:#6173cb; ಫ್ಲೋಟ್:ಎಡ; ಅಗಲ:200px; ಎತ್ತರ:300px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಮಧ್ಯ; ಬಣ್ಣ:#FFFFFF; ಫಾಂಟ್-ಗಾತ್ರ:18px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್:10px; ) #ವಿಷಯ(ಹಿನ್ನೆಲೆ:#ffffff; ಅಂಚು-ಎಡ:200px;ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಮಧ್ಯ; ) #ಅಡಿಟಿಪ್ಪಣಿ ಗಾತ್ರ: 14px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್: 10px;
ಈಗ ನಮ್ಮ ಪುಟವನ್ನು ಪರದೆಯ ಎಡ ಅಂಚಿಗೆ ಒತ್ತಲಾಗುತ್ತದೆ.
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಸೈಟ್ ಪುಟಗಳ ಕೇಂದ್ರ ಜೋಡಣೆಯನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಮಾಡಬಹುದು. ನಮ್ಮ ಪುಟವು "ದೇಹ" ಟ್ಯಾಗ್ ಅನ್ನು ಹೊಂದಿದೆ ಎಂದು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳೋಣ, ಅದನ್ನು ಅಗಲ ಮತ್ತು ಕೆಲವು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸಹ ನೀಡಬಹುದು.
ನಾವು ಇದನ್ನು ಮಾಡೋಣ: "ದೇಹ" ಟ್ಯಾಗ್‌ಗೆ 800 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲವನ್ನು ("ಮುಖ್ಯ" ಬ್ಲಾಕ್‌ನಂತೆ) ಮತ್ತು 50% ರ ಪ್ಯಾಡಿಂಗ್-ಎಡವನ್ನು ನೀಡಿ. ನಂತರ "ಮುಖ್ಯ" ಬ್ಲಾಕ್ನ ಸಂಪೂರ್ಣ ವಿಷಯಗಳನ್ನು ಪರದೆಯ ಬಲಭಾಗದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ (ಅಂದರೆ ಮಧ್ಯದಿಂದ ಬಲಕ್ಕೆ):
ನಮ್ಮ "ಮುಖ್ಯ" ಬ್ಲಾಕ್ ಅನ್ನು ಪರದೆಯ ಮಧ್ಯದಲ್ಲಿ ಇರಿಸಲು, ಅದರ ಮಧ್ಯವು "ದೇಹ" ಟ್ಯಾಗ್ನ ಮಧ್ಯದಲ್ಲಿ ಹೊಂದಿಕೆಯಾಗಬೇಕು. ಆ. ನೀವು "ಮುಖ್ಯ" ಬ್ಲಾಕ್ ಅನ್ನು ಅದರ ಅರ್ಧದಷ್ಟು ಎಡಕ್ಕೆ ಬದಲಾಯಿಸಬೇಕಾಗಿದೆ. "ಮುಖ್ಯ" ಬ್ಲಾಕ್ನ ಅಗಲವು 800 ಪಿಕ್ಸೆಲ್‌ಗಳು, ಅಂದರೆ ನೀವು ಅದಕ್ಕೆ "ಅಂಚು-ಎಡ:-400px" ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಬೇಕಾಗಿದೆ. ಹೌದು, ಈ ಆಸ್ತಿಯು ಋಣಾತ್ಮಕ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ನಂತರ ಎಡ ಅಂಚು ಕಡಿಮೆಯಾಗುತ್ತದೆ (ಅಂದರೆ ಎಡಕ್ಕೆ ವರ್ಗಾಯಿಸಲಾಗುತ್ತದೆ). ಮತ್ತು ಇದು ನಿಖರವಾಗಿ ನಮಗೆ ಬೇಕಾಗಿರುವುದು.
ಸ್ಟೈಲ್ ಶೀಟ್ ಈಗ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
ದೇಹ(ಅಗಲ:800px; ಪ್ಯಾಡಿಂಗ್-ಎಡ:50%; ) #ಮುಖ್ಯ(ಅಗಲ:800px; ಅಂಚು-ಎಡ:-400px; ) #ಹೆಡರ್(ಹಿನ್ನೆಲೆ:#3e4982; ಅಗಲ:800px; ಎತ್ತರ:150px; ಪಠ್ಯ-ಜೋಡಣೆ:ಕೇಂದ್ರ ;#FFFFFF; font-size:24px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್: 40px; ಫಾಂಟ್-ಗಾತ್ರ: 18px; ಪ್ಯಾಡಿಂಗ್-ಟಾಪ್: 10px; ಅಗಲ:800px;ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಮಧ್ಯ;ಫಾಂಟ್-ಗಾತ್ರ:14px;
ಮತ್ತು ಬ್ರೌಸರ್‌ನಲ್ಲಿನ ನಮ್ಮ ಪುಟವು ನಿಖರವಾಗಿ ಮಧ್ಯದಲ್ಲಿದೆ:
ಸೈಟ್ ಪುಟಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ನಾವು ಎರಡು ಆಯ್ಕೆಗಳನ್ನು ನೋಡಿದ್ದೇವೆ, ಅವು ಸಿದ್ಧಾಂತವಲ್ಲ. ನೀವು ಪ್ರಯೋಗ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಆವೃತ್ತಿಯೊಂದಿಗೆ ಬರಬಹುದು, ಅದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ ವಿವಿಧ ಬ್ರೌಸರ್ಗಳು. ದುರದೃಷ್ಟವಶಾತ್, ಫೈರ್‌ಫಾಕ್ಸ್ ಅಥವಾ ಒಪೇರಾದಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಪ್ರದರ್ಶಿಸುವ ಐಇ ಮತ್ತು ಪ್ರತಿಯಾಗಿ ಸಂಪೂರ್ಣವಾಗಿ ಅಗ್ರಾಹ್ಯವಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು. ಮತ್ತು ನಾವು ಇದನ್ನು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.
ನಿಮ್ಮ ಸೃಜನಶೀಲ ಅನ್ವೇಷಣೆಯಲ್ಲಿ ನಿಮಗೆ ಶುಭವಾಗಲಿ!
ಲೇಔಟ್‌ನೊಂದಿಗೆ ವ್ಯವಹರಿಸಬೇಕಾದ ನಿಮ್ಮಲ್ಲಿ ಅನೇಕರು ಅಂಶಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸುವ ಅಗತ್ಯವನ್ನು ಎದುರಿಸಿದ್ದಾರೆ ಮತ್ತು ಅಂಶವನ್ನು ಕೇಂದ್ರಕ್ಕೆ ಜೋಡಿಸುವಾಗ ಉಂಟಾಗುವ ತೊಂದರೆಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುತ್ತಾರೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
ಹೌದು, ಫಾರ್ ಲಂಬ ಜೋಡಣೆ CSS ಬಹು ಮೌಲ್ಯಗಳೊಂದಿಗೆ ವಿಶೇಷ ಲಂಬ-ಜೋಡಣೆ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ಪ್ರಾಯೋಗಿಕವಾಗಿ ಇದು ನಿರೀಕ್ಷಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ. ಇದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಪ್ರಯತ್ನಿಸೋಣ.
ಕೆಳಗಿನ ವಿಧಾನಗಳನ್ನು ಹೋಲಿಕೆ ಮಾಡೋಣ. ಬಳಸಿಕೊಂಡು ಹೊಂದಿಸಿ:
- ಕೋಷ್ಟಕಗಳು,
- ಇಂಡೆಂಟೇಶನ್,
- ಸಾಲು-ಎತ್ತರ
- ವಿಸ್ತರಿಸುವುದು,
- ಋಣಾತ್ಮಕ ಅಂಚು,
- ರೂಪಾಂತರ
- ಹುಸಿ ಅಂಶ
- ಫ್ಲೆಕ್ಸ್ ಬಾಕ್ಸ್.
ಎರಡು ಇವೆ ಡಿವಿ ಅಂಶ, ಅವುಗಳಲ್ಲಿ ಒಂದು ಇನ್ನೊಂದರೊಳಗೆ ಗೂಡುಕಟ್ಟಿದೆ. ಅವರಿಗೆ ಅನುಗುಣವಾದ ವರ್ಗಗಳನ್ನು ನೀಡೋಣ - ಹೊರ ಮತ್ತು ಒಳ.
ಆಂತರಿಕ ಅಂಶವನ್ನು ಹೊರಗಿನ ಅಂಶದ ಕೇಂದ್ರದೊಂದಿಗೆ ಜೋಡಿಸುವುದು ಸವಾಲು.
ಮೊದಲಿಗೆ, ಬಾಹ್ಯ ಮತ್ತು ಆಂತರಿಕ ಬ್ಲಾಕ್ಗಳ ಆಯಾಮಗಳು ಯಾವಾಗ ಎಂದು ಪರಿಗಣಿಸೋಣ ತಿಳಿದಿದೆ. ರೂಲ್ ಡಿಸ್ಪ್ಲೇ ಅನ್ನು ಸೇರಿಸೋಣ: ಒಳಗಿನ ಅಂಶಕ್ಕೆ ಇನ್ಲೈನ್-ಬ್ಲಾಕ್, ಮತ್ತು ಟೆಕ್ಸ್ಟ್-ಅಲೈನ್: ಸೆಂಟರ್ ಮತ್ತು ವರ್ಟಿಕಲ್-ಅಲೈನ್: ಮಧ್ಯದಿಂದ ಹೊರಗಿನ ಅಂಶಕ್ಕೆ.
ಇನ್ಲೈನ್ ಅಥವಾ ಇನ್ಲೈನ್-ಬ್ಲಾಕ್ ಡಿಸ್ಪ್ಲೇ ಮೋಡ್ ಹೊಂದಿರುವ ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಜೋಡಣೆ ಅನ್ವಯಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ.
ಬ್ಲಾಕ್ಗಳ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿಸೋಣ, ಹಾಗೆಯೇ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳುಅವರ ಗಡಿಗಳನ್ನು ನೋಡಲು.
ಹೊರ (ಅಗಲ: 200px; ಎತ್ತರ: 200px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಲಂಬ-ಜೋಡಣೆ: ಮಧ್ಯಮ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #ffc; ) .ಒಳಗಿನ (ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್; ಅಗಲ: 100px; ಎತ್ತರ: 100px; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ : #fcc)
ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಿದ ನಂತರ, ಒಳಗಿನ ಬ್ಲಾಕ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಜೋಡಿಸಲಾಗಿದೆ ಎಂದು ನಾವು ನೋಡುತ್ತೇವೆ, ಆದರೆ ಲಂಬವಾಗಿ ಅಲ್ಲ:
http://jsfiddle.net/c1bgfffq/
ಇದು ಏಕೆ ಸಂಭವಿಸಿತು?ವಿಷಯವೆಂದರೆ ಲಂಬ-ಜೋಡಣೆ ಆಸ್ತಿ ಜೋಡಣೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಅಂಶ ಸ್ವತಃ, ಅದರ ವಿಷಯಗಳಲ್ಲ(ಅದನ್ನು ಟೇಬಲ್ ಕೋಶಗಳಿಗೆ ಅನ್ವಯಿಸಿದಾಗ ಹೊರತುಪಡಿಸಿ). ಆದ್ದರಿಂದ ಅಪ್ಲಿಕೇಶನ್ ಈ ಆಸ್ತಿಯಗೆ ಬಾಹ್ಯ ಅಂಶಏನನ್ನೂ ನೀಡಲಿಲ್ಲ. ಇದಲ್ಲದೆ, ಈ ಆಸ್ತಿಯನ್ನು ಒಳಗಿನ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸುವುದರಿಂದ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಇನ್ಲೈನ್-ಬ್ಲಾಕ್‌ಗಳು ಪಕ್ಕದ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಲಂಬವಾಗಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುತ್ತವೆ ಮತ್ತು ನಮ್ಮ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಒಂದು ಇನ್ಲೈನ್ ಬ್ಲಾಕ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ.
ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಹಲವಾರು ತಂತ್ರಗಳಿವೆ. ಕೆಳಗೆ ನಾವು ಅವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದನ್ನು ಹತ್ತಿರದಿಂದ ನೋಡುತ್ತೇವೆ.
ಟೇಬಲ್ ಬಳಸಿ ಜೋಡಣೆ
ಮನಸ್ಸಿಗೆ ಬರುವ ಮೊದಲ ಪರಿಹಾರವೆಂದರೆ ಹೊರಗಿನ ಬ್ಲಾಕ್ ಅನ್ನು ಒಂದು ಕೋಶದ ಟೇಬಲ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸುವುದು. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಜೋಡಣೆಯನ್ನು ಕೋಶದ ವಿಷಯಗಳಿಗೆ, ಅಂದರೆ ಒಳಗಿನ ಬ್ಲಾಕ್ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
http://jsfiddle.net/c1bgfffq/1/
ಸ್ಪಷ್ಟ ಮೈನಸ್ ಈ ನಿರ್ಧಾರ- ಶಬ್ದಾರ್ಥದ ದೃಷ್ಟಿಕೋನದಿಂದ, ಜೋಡಣೆಗಾಗಿ ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸುವುದು ತಪ್ಪಾಗಿದೆ. ಎರಡನೆಯ ಅನನುಕೂಲವೆಂದರೆ ಟೇಬಲ್ ರಚಿಸಲು ನೀವು ಇನ್ನೊಂದು ಅಂಶವನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ ಬಾಹ್ಯ ಘಟಕ.
ಟೇಬಲ್ ಮತ್ತು td ಟ್ಯಾಗ್‌ಗಳನ್ನು div ನೊಂದಿಗೆ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಮತ್ತು CSS ನಲ್ಲಿ ಟೇಬಲ್ ಡಿಸ್ಪ್ಲೇ ಮೋಡ್ ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ ಮೊದಲ ಮೈನಸ್ ಅನ್ನು ಭಾಗಶಃ ತೆಗೆದುಹಾಕಬಹುದು.
.ಹೊರ-ಹೊದಿಕೆ (ಪ್ರದರ್ಶನ: ಟೇಬಲ್; ) .ಔಟರ್ (ಪ್ರದರ್ಶನ: ಟೇಬಲ್-ಸೆಲ್;)
ಆದಾಗ್ಯೂ, ಹೊರಗಿನ ಬ್ಲಾಕ್ ಇನ್ನೂ ಎಲ್ಲಾ ನಂತರದ ಪರಿಣಾಮಗಳೊಂದಿಗೆ ಟೇಬಲ್ ಆಗಿ ಉಳಿಯುತ್ತದೆ.
ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಜೋಡಣೆ
ಒಳ ಮತ್ತು ಹೊರಗಿನ ಬ್ಲಾಕ್ಗಳ ಎತ್ತರವು ತಿಳಿದಿದ್ದರೆ, ನಂತರ ಸೂತ್ರವನ್ನು ಬಳಸಿಕೊಂಡು ಒಳಗಿನ ಬ್ಲಾಕ್ನ ಲಂಬ ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸಬಹುದು: (H ಔಟರ್ - H ಒಳ) / 2.ಹೊರ (ಎತ್ತರ: 200px; ) .ಒಳ (ಎತ್ತರ: 100px; ಅಂಚು: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
ಪರಿಹಾರದ ಅನನುಕೂಲವೆಂದರೆ ಅದು ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ ಸೀಮಿತ ಸಂಖ್ಯೆಎರಡೂ ಬ್ಲಾಕ್ಗಳ ಎತ್ತರಗಳು ತಿಳಿದಿರುವಾಗ.
ಲೈನ್-ಎತ್ತರವನ್ನು ಬಳಸಿಕೊಂಡು ಜೋಡಣೆ
ಒಳಗಿನ ಬ್ಲಾಕ್ ಪಠ್ಯದ ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸಾಲುಗಳನ್ನು ಆಕ್ರಮಿಸಬಾರದು ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದ್ದರೆ, ನೀವು ಲೈನ್-ಎತ್ತರ ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಅದನ್ನು ಹೊಂದಿಸಬಹುದು ಎತ್ತರಕ್ಕೆ ಸಮಾನವಾಗಿರುತ್ತದೆಬಾಹ್ಯ ಬ್ಲಾಕ್. ಒಳಗಿನ ಬ್ಲಾಕ್ನ ವಿಷಯವು ಎರಡನೇ ಸಾಲಿಗೆ ಸುತ್ತಿಕೊಳ್ಳಬಾರದು ಎಂಬ ಕಾರಣದಿಂದ, ವೈಟ್-ಸ್ಪೇಸ್: ನೌರಾಪ್ ಮತ್ತು ಓವರ್‌ಫ್ಲೋ: ಗುಪ್ತ ನಿಯಮಗಳನ್ನು ಸೇರಿಸಲು ಸಹ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.ಹೊರ (ಎತ್ತರ: 200px; ಗೆರೆ-ಎತ್ತರ: 200px; ) .ಒಳಭಾಗ (ಬಿಳಿ-ಸ್ಪೇಸ್: ನೌರಾಪ್; ಓವರ್‌ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ; )
http://jsfiddle.net/c1bgfffq/12/
ಅಲ್ಲದೆ ಈ ತಂತ್ರಲೆವೆಲಿಂಗ್‌ಗೆ ಸಹ ಬಳಸಬಹುದು ಬಹು ಸಾಲಿನ ಪಠ್ಯ, ನೀವು ಒಳಗಿನ ಬ್ಲಾಕ್ಗಾಗಿ ಲೈನ್-ಎತ್ತರ ಮೌಲ್ಯವನ್ನು ಮರುವ್ಯಾಖ್ಯಾನಿಸಿದರೆ ಮತ್ತು ಪ್ರದರ್ಶನವನ್ನು ಸಹ ಸೇರಿಸಿದರೆ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್ ಮತ್ತು ವರ್ಟಿಕಲ್-ಅಲೈನ್: ಮಧ್ಯಮ ನಿಯಮಗಳು.
ಹೊರ (ಎತ್ತರ: 200px; ಗೆರೆ-ಎತ್ತರ: 200px; ) .ಒಳ (ಲೈನ್-ಎತ್ತರ: ಸಾಮಾನ್ಯ; ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್; ಲಂಬ-ಜೋಡಣೆ: ಮಧ್ಯ;)
http://jsfiddle.net/c1bgfffq/15/
ಈ ವಿಧಾನದ ಅನನುಕೂಲವೆಂದರೆ ಬಾಹ್ಯ ಬ್ಲಾಕ್ನ ಎತ್ತರವನ್ನು ತಿಳಿದಿರಬೇಕು.
"ಸ್ಟ್ರೆಚ್" ಅನ್ನು ಬಳಸಿಕೊಂಡು ಜೋಡಣೆ
ಬಾಹ್ಯ ಬ್ಲಾಕ್ನ ಎತ್ತರವು ತಿಳಿದಿಲ್ಲದಿದ್ದಾಗ ಈ ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ಆಂತರಿಕ ಬ್ಲಾಕ್ನ ಎತ್ತರವು ತಿಳಿದಿರುತ್ತದೆ.ಇದನ್ನು ಮಾಡಲು ನಿಮಗೆ ಅಗತ್ಯವಿದೆ:
- ಬಾಹ್ಯ ಘಟಕಕ್ಕೆ ಹೊಂದಿಸಲಾಗಿದೆ ಸಂಬಂಧಿತ ಸ್ಥಾನೀಕರಣ, ಮತ್ತು ಆಂತರಿಕಕ್ಕೆ - ಸಂಪೂರ್ಣ;
- ಮೇಲಿನ ನಿಯಮಗಳನ್ನು ಸೇರಿಸಿ: 0 ಮತ್ತು ಕೆಳಭಾಗ: 0 ಒಳಗಿನ ಬ್ಲಾಕ್ಗೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಅದು ಹೊರಗಿನ ಬ್ಲಾಕ್ನ ಸಂಪೂರ್ಣ ಎತ್ತರಕ್ಕೆ ವಿಸ್ತರಿಸುತ್ತದೆ;
- ಒಳಗಿನ ಬ್ಲಾಕ್ನ ಲಂಬವಾದ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಗೆ ಹೊಂದಿಸಿ.
http://jsfiddle.net/c1bgfffq/4/
ಈ ತಂತ್ರದ ಹಿಂದಿನ ಕಲ್ಪನೆಯೆಂದರೆ, ಹಿಗ್ಗಿಸಲಾದ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಬ್ಲಾಕ್ಗೆ ಎತ್ತರವನ್ನು ಹೊಂದಿಸುವುದು ಬ್ರೌಸರ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಿದರೆ ಲಂಬ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸಮಾನ ಅನುಪಾತದಲ್ಲಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಕಾರಣವಾಗುತ್ತದೆ.
ಋಣಾತ್ಮಕ ಅಂಚು-ಮೇಲ್ಭಾಗದೊಂದಿಗೆ ಜೋಡಣೆ
ಈ ವಿಧಾನವು ವ್ಯಾಪಕವಾಗಿ ಪರಿಚಿತವಾಗಿದೆ ಮತ್ತು ಇದನ್ನು ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಹಿಂದಿನದರಂತೆ, ಹೊರಗಿನ ಬ್ಲಾಕ್ನ ಎತ್ತರವು ತಿಳಿದಿಲ್ಲದಿದ್ದಾಗ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಒಳಗಿನ ಎತ್ತರವು ತಿಳಿದಿರುತ್ತದೆ.ನೀವು ಬಾಹ್ಯ ಬ್ಲಾಕ್ ಅನ್ನು ಸಂಬಂಧಿತ ಸ್ಥಾನಕ್ಕೆ ಮತ್ತು ಆಂತರಿಕ ಬ್ಲಾಕ್ ಅನ್ನು ಸಂಪೂರ್ಣ ಸ್ಥಾನಕ್ಕೆ ಹೊಂದಿಸಬೇಕಾಗಿದೆ. ನಂತರ ನೀವು ಒಳಗಿನ ಬ್ಲಾಕ್ ಅನ್ನು ಹೊರಗಿನ ಬ್ಲಾಕ್ ಟಾಪ್‌ನ ಅರ್ಧದಷ್ಟು ಎತ್ತರದಿಂದ ಕೆಳಕ್ಕೆ ಚಲಿಸಬೇಕಾಗುತ್ತದೆ: 50% ಮತ್ತು ಅದರ ಸ್ವಂತ ಎತ್ತರದ ಅಂಚು-ಮೇಲ್ಭಾಗದ ಅರ್ಧದಷ್ಟು ಅದನ್ನು ಮೇಲಕ್ಕೆತ್ತಿ: -H ಒಳ / 2.
ಹೊರ (ಸ್ಥಾನ: ಸಂಬಂಧಿ;) .ಒಳ (ಎತ್ತರ: 100px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 50%; ಅಂಚು-ಮೇಲ್ಭಾಗ: -50px; )
http://jsfiddle.net/c1bgfffq/13/
ಈ ವಿಧಾನದ ಅನನುಕೂಲವೆಂದರೆ ಒಳಾಂಗಣ ಘಟಕದ ಎತ್ತರವನ್ನು ತಿಳಿದಿರಬೇಕು.
ರೂಪಾಂತರದೊಂದಿಗೆ ಜೋಡಣೆ
ಈ ವಿಧಾನವು ಹಿಂದಿನದಕ್ಕೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಒಳಾಂಗಣ ಘಟಕದ ಎತ್ತರವು ತಿಳಿದಿಲ್ಲದಿದ್ದಾಗ ಇದನ್ನು ಬಳಸಬಹುದು. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಋಣಾತ್ಮಕ ಪಿಕ್ಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುವ ಬದಲು, ನೀವು ರೂಪಾಂತರದ ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದು ಮತ್ತು translateY ಫಂಕ್ಷನ್ ಮತ್ತು -50% ಮೌಲ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಒಳಗಿನ ಬ್ಲಾಕ್ ಅನ್ನು ಮೇಲಕ್ಕೆ ಸರಿಸಬಹುದು.ಹೊರ (ಸ್ಥಾನ: ಸಂಬಂಧಿ;) .ಒಳ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 50%; ರೂಪಾಂತರ: ಅನುವಾದY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
ಏಕೆ ಒಳಗೆ ಹಿಂದಿನ ವಿಧಾನನೀವು ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲವೇ? ಮೂಲ ಅಂಶಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಶೇಕಡಾವಾರು ಅಂಚು ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಹಾಕಲಾಗಿರುವುದರಿಂದ, 50% ಮೌಲ್ಯವು ಹೊರಗಿನ ಪೆಟ್ಟಿಗೆಯ ಅರ್ಧದಷ್ಟು ಎತ್ತರವಾಗಿರುತ್ತದೆ ಮತ್ತು ನಾವು ಒಳಗಿನ ಪೆಟ್ಟಿಗೆಯನ್ನು ಅದರ ಸ್ವಂತ ಎತ್ತರಕ್ಕೆ ಅರ್ಧಕ್ಕೆ ಏರಿಸಬೇಕಾಗಿದೆ. ರೂಪಾಂತರ ಆಸ್ತಿ ಇದಕ್ಕೆ ಸೂಕ್ತವಾಗಿದೆ.
ಈ ವಿಧಾನದ ಅನನುಕೂಲವೆಂದರೆ ಒಳಾಂಗಣ ಘಟಕವು ಸಂಪೂರ್ಣ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದ್ದರೆ ಅದನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.
ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಜೋಡಣೆ
ಹೆಚ್ಚಿನವು ಆಧುನಿಕ ರೀತಿಯಲ್ಲಿಲಂಬವಾದ ಜೋಡಣೆಯು ಫ್ಲೆಕ್ಸಿಬಲ್ ಬಾಕ್ಸ್ ಲೇಔಟ್ ಅನ್ನು ಬಳಸುವುದು (ಜನಪ್ರಿಯವಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ). ಪುಟದಲ್ಲಿನ ಅಂಶಗಳ ಸ್ಥಾನವನ್ನು ಸುಲಭವಾಗಿ ನಿಯಂತ್ರಿಸಲು ಈ ಮಾಡ್ಯೂಲ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳನ್ನು ಎಲ್ಲಿಯಾದರೂ ಜೋಡಿಸಿ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗಾಗಿ ಕೇಂದ್ರ ಜೋಡಣೆ ತುಂಬಾ ಸರಳವಾದ ಕಾರ್ಯವಾಗಿದೆ.ಹೊರಗಿನ ಬ್ಲಾಕ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹೊಂದಿಸಬೇಕಾಗಿದೆ: ಫ್ಲೆಕ್ಸ್ ಮತ್ತು ಒಳಗಿನ ಬ್ಲಾಕ್ ಅನ್ನು ಅಂಚು: ಸ್ವಯಂ . ಮತ್ತು ಅಷ್ಟೆ! ಸುಂದರ, ಅಲ್ಲವೇ?
ಹೊರ (ಪ್ರದರ್ಶನ: ಫ್ಲೆಕ್ಸ್; ಅಗಲ: 200px; ಎತ್ತರ: 200px; ) .ಒಳ (ಅಗಲ: 100px; ಅಂಚು: ಸ್ವಯಂ; )
http://jsfiddle.net/c1bgfffq/14/
ಈ ವಿಧಾನದ ಅನನುಕೂಲವೆಂದರೆ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತವೆ.
ನಾನು ಯಾವ ವಿಧಾನವನ್ನು ಆರಿಸಬೇಕು?
ನೀವು ಸಮಸ್ಯೆಯ ಹೇಳಿಕೆಯಿಂದ ಪ್ರಾರಂಭಿಸಬೇಕು:- ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲು, ಲಂಬ ಇಂಡೆಂಟ್ಗಳು ಅಥವಾ ಲೈನ್-ಎತ್ತರ ಆಸ್ತಿಯನ್ನು ಬಳಸುವುದು ಉತ್ತಮ.
- ತಿಳಿದಿರುವ ಎತ್ತರದೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶಗಳಿಗಾಗಿ (ಉದಾಹರಣೆಗೆ, ಐಕಾನ್‌ಗಳು), ಇದರೊಂದಿಗೆ ವಿಧಾನ ನಕಾರಾತ್ಮಕ ಆಸ್ತಿಅಂಚು-ಮೇಲ್ಭಾಗ.
- ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಬ್ಲಾಕ್ನ ಎತ್ತರವು ತಿಳಿದಿಲ್ಲದಿದ್ದಾಗ, ನೀವು ಹುಸಿ ಅಂಶ ಅಥವಾ ರೂಪಾಂತರ ಆಸ್ತಿಯನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.
- ಸರಿ, ನೀವು ತುಂಬಾ ಅದೃಷ್ಟವಂತರಾಗಿದ್ದರೆ, ನೀವು ಐಇ ಬ್ರೌಸರ್‌ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲ, ಆಗ, ಸಹಜವಾಗಿ, ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಬಳಸುವುದು ಉತ್ತಮ.
