ਵੈਬਸਾਈਟ ਬਣਾਉਂਦੇ ਸਮੇਂ ਸੈਂਟਰ ਚਿੱਤਰ, ਟੈਕਸਟ ਅਤੇ ਬਲਾਕ ਤੱਤ
ਜੇ ਤੁਸੀਂ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖ ਰਹੇ ਹੋ, ਤਾਂ ਮਾਸਟਰ ਦੇ ਲਈ ਸਭ ਤੋਂ ਆਮ ਗੁਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਬ੍ਰਾਉਜ਼ਰ ਵਿੰਡੋ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ. ਇਸਦਾ ਮਤਲਬ ਪੰਨੇ 'ਤੇ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੋ ਸਕਦਾ ਹੈ, ਜਾਂ ਇਹ ਡਿਜ਼ਾਈਨ ਦੇ ਹਿੱਸੇ ਦੇ ਰੂਪ ਵਿੱਚ ਸੁਰਖੀਆਂ ਦੀ ਤਰ੍ਹਾਂ ਸੈਂਟਰ-ਜਾਇਜ਼ ਪਾਠ ਹੋ ਸਕਦਾ ਹੈ.
ਕਸਟਰਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਸ (ਸੀਐਸਐਸ) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇਹ ਸੈਂਟਰਡ ਚਿੱਤਰਾਂ ਜਾਂ ਟੈਕਸਟ ਜਾਂ ਆਪਣੇ ਪੂਰੇ ਵੈਬਪੇਜ ਦੇ ਵਿਜ਼ੁਅਲ ਦਿੱਖ ਨੂੰ ਪੂਰਾ ਕਰਨ ਦਾ ਸਹੀ ਤਰੀਕਾ ਹੈ. ਸੈਂਟਰਿੰਗ ਲਈ ਜ਼ਿਆਦਾਤਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸੰਸਕਰਣ 1.0 ਤੋਂ CSS ਵਿਚ ਹਨ ਅਤੇ ਉਹ CSS3 ਅਤੇ ਆਧੁਨਿਕ ਵੈਬ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਨਾਲ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ .
ਵੈਬ ਡਿਜ਼ਾਈਨ ਦੇ ਕਈ ਪਹਿਲੂਆਂ ਵਾਂਗ, ਵੈਬ ਪੇਜ ਵਿੱਚ ਸੈਂਟਰ ਐਲੀਮੈਂਟਸ ਲਈ CSS ਨੂੰ ਵਰਤਣ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ. ਆਉ ਇਸ ਵਿਜ਼ੁਅਲ ਦਿੱਖ ਨੂੰ ਹਾਸਿਲ ਕਰਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਕੁਝ ਵੱਖਰੇ ਤਰੀਕਿਆਂ ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੀਏ.
HTML ਵਿਚ ਸੈਂਟਰ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸੀਐਸਐਸ ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਜਾਣੇ ਜਾਣ 'ਤੇ
CSS ਦੇ ਨਾਲ ਸੈਂਟਰਿੰਗ ਵੈੱਬ ਡੀਜ਼ਾਈਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ ਚੁਣੌਤੀ ਹੋ ਸਕਦੀ ਹੈ ਕਿਉਂਕਿ ਇਸ ਵਿਜ਼ੂਅਲ ਸਟਾਈਲ ਨੂੰ ਪੂਰਾ ਕਰਨ ਦੇ ਬਹੁਤ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਹਨ. ਹਾਲਾਂਕਿ ਕਈ ਤਰ੍ਹਾਂ ਦੀਆਂ ਵਿਧੀਆਂ ਚੰਗੇ ਜਾਂ ਤਜਰਬੇਕਾਰ ਵੈਬ ਡਿਵੈਲਪਰ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਇਹ ਜਾਣਦੇ ਹਨ ਕਿ ਸਾਰੀਆਂ ਤਕਨੀਕਾਂ ਹਰ ਇਕਾਈ 'ਤੇ ਕੰਮ ਨਹੀਂ ਕਰਦੀਆਂ, ਇਹ ਨਵੇਂ ਵੈੱਬ ਪੇਸ਼ੇਵਰਾਂ ਲਈ ਬਹੁਤ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਸਕਦੀਆਂ ਹਨ ਕਿਉਂਕਿ ਵਿਭਿੰਨ ਤਰ੍ਹਾਂ ਦੇ ਵਿਧੀਆਂ ਤੋਂ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਕਿਸ ਤਰੀਕੇ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ ਇਹ ਹੈ ਕਿ ਕੁਝ ਪਹੁੰਚਾਂ ਦੀ ਸਮਝ ਹਾਸਲ ਕਰਨਾ. ਜਿਵੇਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਕਿਹੜਾ ਤਰੀਕਾ ਵਧੀਆ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਉਦਾਹਰਣਾਂ ਹਨ.
ਇੱਕ ਉੱਚ ਪੱਧਰ ਤੇ, ਤੁਸੀਂ CSS ਨੂੰ ਇਸਤੇ ਵਰਤ ਸਕਦੇ ਹੋ:
- ਸੈਂਟਰ ਟੈਕਸਟ
- ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦਾ ਤੱਤ ਕੇਂਦਰ (ਇੱਕ ਡਵੀਜ਼ਨ ਵਾਂਗ)
- ਇੱਕ ਚਿੱਤਰ ਕੇਂਦਰ ਕਰੋ
- ਵਰਟੀਕਲ ਤੌਰ ਤੇ ਇੱਕ ਬਲਾਕ ਜਾਂ ਇੱਕ ਚਿੱਤਰ ਰੱਖੋ
ਬਹੁਤ ਸਾਰੇ (ਬਹੁਤ ਸਾਰੇ) ਸਾਲ ਪਹਿਲਾਂ, ਵੈਬ ਡਿਜ਼ਾਇਨਰ ਚਿੱਤਰਾਂ ਅਤੇ ਪਾਠ ਨੂੰ ਕੇਂਦਰਤ ਕਰਨ ਲਈ
CSS ਨਾਲ ਸੈਂਟਰਿੰਗ ਟੈਕਸਟ
ਵੈਬਪੇਜ ਤੇ ਕੇਂਦਰ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਸੌਖਾ ਚੀਜ਼ ਪਾਠ ਹੈ. ਅਜਿਹਾ ਕਰਨ ਲਈ ਸਿਰਫ ਇੱਕ ਸ਼ੈਲੀ ਦੀ ਜਾਇਦਾਦ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ: text-align ਉਦਾਹਰਨ ਲਈ, CSS ਸਟਾਈਲ ਨੂੰ ਹੇਠਾਂ ਲਵੋ:
p.center {text-align: center; }
CSS ਦੀ ਇਸ ਲਾਈਨ ਨਾਲ, ਸੈਂਟਰ ਕਲਾਸ ਦੇ ਨਾਲ ਲਿਖੇ ਗਏ ਹਰ ਪੈਰਾ ਨੂੰ ਉਸਦੇ ਮੂਲ ਤੱਤ ਦੇ ਅੰਦਰ ਖਿਤਿਜੀ ਕੇਂਦਰਿਤ ਕੀਤਾ ਜਾਵੇਗਾ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਪੈਰਾਗ੍ਰਾਫ ਇੱਕ ਡਵੀਜ਼ਨ ਦੇ ਅੰਦਰ ਸੀ, ਭਾਵ ਇਹ ਉਸ ਡਿਵੀਜ਼ਨ ਦਾ ਬੱਚਾ ਸੀ, ਤਾਂ ਇਹ
ਇੱਥੇ HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਲਾਗੂ ਕੀਤੀ ਇਸ ਕਲਾਸ ਦੀ ਉਦਾਹਰਨ ਹੈ:
ਇਹ ਟੈਕਸਟ ਕੇਂਦਰਿਤ ਹੈ.
ਟੈਕਸਟ-ਅਲਾਈਨ ਸੰਪੱਤੀ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੀ ਰਚਨਾ ਕਰਦੇ ਸਮੇਂ, ਯਾਦ ਰੱਖੋ ਕਿ ਇਹ ਉਸਦੇ ਸੰਮਲਿਤ ਤੱਤ ਦੇ ਅੰਦਰ ਕੇਂਦਰਿਤ ਹੋਵੇਗਾ ਅਤੇ ਜ਼ਰੂਰੀ ਨਹੀਂ ਕਿ ਪੂਰੀ ਸਫੇ ਦੇ ਅੰਦਰ ਹੀ ਕੇਂਦਰਿਤ ਹੋਵੇ ਇਹ ਵੀ ਯਾਦ ਰੱਖੋ ਕਿ ਸੈਂਟਰ-ਜਾਇਜ਼ ਟੈਕਸਟ ਸਮੱਗਰੀ ਦੇ ਵੱਡੇ ਬਲਾਕਾਂ ਲਈ ਪੜ੍ਹਨਾ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਥੋੜ੍ਹੇ ਢੰਗ ਨਾਲ ਇਸ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰੋ ਸਿਰਲੇਖ ਅਤੇ ਪਾਠ ਦੇ ਛੋਟੇ ਬਲਾਕ, ਜਿਵੇਂ ਕਿਸੇ ਲੇਖ ਜਾਂ ਹੋਰ ਸਮੱਗਰੀ ਲਈ ਟੀਜ਼ਰ ਪਾਠ ਲਈ, ਅਕਸਰ ਕੇਂਦਰਿਤ ਹੋਣ ਤੇ ਪੜ੍ਹਨ ਅਤੇ ਵਧੀਆ ਹੁੰਦੇ ਹਨ, ਲੇਕਿਨ ਪਾਠ ਦੇ ਵੱਡੇ ਬਲੌਕਸ, ਪੂਰੇ ਲੇਖ ਦੀ ਤਰ੍ਹਾਂ, ਇਸ ਤਰ੍ਹਾਂ ਵਰਤਣ ਲਈ ਚੁਣੌਤੀਪੂਰਨ ਹੋਣਗੇ ਜੇਕਰ ਸਮਗਰੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੇਂਦਰਿਤ ਹੈ ਧਰਮੀ ਯਾਦ ਰੱਖੋ, ਜਦੋਂ ਵੈਬ ਸਾਈਟ ਦੇ ਪਾਠ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ ਤਾਂ ਪੜ੍ਹਨਯੋਗਤਾ ਹਮੇਸ਼ਾਂ ਮਹੱਤਵਪੂਰਣ ਹੁੰਦੀ ਹੈ!
CSS ਦੇ ਨਾਲ ਸਮਗਰੀ ਦੇ ਬਲੌਕ ਸੈਂਟਰਿੰਗ
ਬਲਾਕ ਤੁਹਾਡੇ ਪੰਨੇ 'ਤੇ ਕਿਸੇ ਵੀ ਤੱਤ ਹੁੰਦੇ ਹਨ ਜਿਸਦੇ ਪਰਿਭਾਸ਼ਿਤ ਚੌੜਾਈ ਹੁੰਦੇ ਹਨ ਅਤੇ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਸਥਾਪਿਤ ਹੁੰਦੇ ਹਨ. ਕਈ ਵਾਰ, ਇਹ ਬਲਾਕ HTML
div.center {
ਹਾਸ਼ੀਆ: 0 ਆਟੋ;
ਚੌੜਾਈ: 80 ਐਮਐਮ;
}
ਮਾਰਜਨ ਪ੍ਰਾਪਰਟੀ ਲਈ ਇਹ CSS ਸ਼ਾਰਟਹੈਂਡਸ, ਉੱਪਰ ਦੇ ਅਤੇ ਹੇਠਲੇ ਹਾਸ਼ੀਏ ਨੂੰ 0 ਦੇ ਮੁੱਲ ਤੇ ਸੈਟ ਕਰੇਗਾ, ਜਦੋਂ ਕਿ ਖੱਬੇ ਅਤੇ ਸੱਜੇ "ਆਟੋ" ਦੀ ਵਰਤੋਂ ਕਰਨਗੇ. ਇਹ ਅਵੱਸ਼ਕ ਕੋਈ ਵੀ ਸਪੇਸ ਲੈਂਦਾ ਹੈ ਜੋ ਉਪਲਬਧ ਹੈ ਅਤੇ ਵਿਊਪੋਰਟ ਵਿੰਡੋ ਦੇ ਦੋਹਾਂ ਪਾਸਿਆਂ ਦੇ ਵਿੱਚ ਸਮਾਨ ਰੂਪ ਵਿੱਚ ਇਸ ਨੂੰ ਵੰਡਦਾ ਹੈ, ਪੇਜ ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਤੱਤ ਪਾ ਰਿਹਾ ਹੈ.
ਇੱਥੇ ਇਹ HTML ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ:
ਪਰ ਇਸਦੇ ਅੰਦਰਲੇ ਪਾਠ ਨੂੰ ਇਕਸਾਰ ਰੱਖਿਆ ਗਿਆ ਹੈ.
ਜਦੋਂ ਤਕ ਤੁਹਾਡੇ ਬਲਾਕ ਦੀ ਪਰਿਭਾਸ਼ਿਤ ਚੌੜਾਈ ਹੋਵੇ, ਉਦੋਂ ਤੱਕ ਇਹ ਆਪਣੇ ਆਪ ਅੰਦਰਲੇ ਤੱਤ ਦੇ ਅੰਦਰ ਕੇਂਦਰਿਤ ਹੋ ਜਾਵੇਗਾ. ਉਸ ਬਲਾਕ ਵਿੱਚ ਸ਼ਾਮਲ ਟੈਕਸਟ ਇਸ ਦੇ ਅੰਦਰ ਕੇਂਦਰਿਤ ਨਹੀਂ ਹੋਵੇਗਾ, ਪਰ ਇਸ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਜਾਵੇਗਾ-ਜਾਇਜ਼. ਇਹ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ. ਜੇ ਤੁਸੀਂ ਪਾਠ ਨੂੰ ਕਦਰਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪਾਠ-ਅਲਾਇੰਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਅਸੀਂ ਇਸ ਵਿਧੀ ਦੇ ਨਾਲ ਜੋੜ ਕੇ ਡਿਵੀਜ਼ਨ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਸੀ.
CSS ਦੇ ਨਾਲ ਸੈਂਟਰਿੰਗ ਚਿੱਤਰ
ਹਾਲਾਂਕਿ ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰ ਇਕੋ ਟੈਕਸਟ-ਅਲਾਈਨ ਪ੍ਰਦਾਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ ਜੋ ਅਸੀਂ ਪੈਰਾਗ੍ਰਾਫ ਲਈ ਪਹਿਲਾਂ ਹੀ ਦੇਖ ਚੁੱਕੇ ਹਾਂ, ਇਸ ਤਕਨੀਕ 'ਤੇ ਭਰੋਸਾ ਕਰਨ ਦਾ ਇਹ ਚੰਗਾ ਵਿਚਾਰ ਨਹੀਂ ਹੈ ਕਿਉਂਕਿ W3C ਦੁਆਰਾ ਇਸ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਇਸਦੀ ਸਿਫਾਰਸ਼ ਨਹੀਂ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ, ਇਸ ਲਈ ਹਮੇਸ਼ਾ ਇਹ ਸੰਭਾਵਨਾ ਹੁੰਦੀ ਹੈ ਕਿ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਭਵਿੱਖ ਦੇ ਸੰਸਕਰਣ ਇਸ ਵਿਧੀ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨ ਲਈ ਚੋਣ ਕਰ ਸਕਦੇ ਹਨ.
ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਟੈਕਸਟ-ਅਲਾਈਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਹਾਨੂੰ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਸਪੱਸ਼ਟ ਤੌਰ ਤੇ ਦੱਸਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਚਿੱਤਰ ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦਾ ਤੱਤ ਹੈ ਇਸ ਤਰੀਕੇ ਨਾਲ, ਤੁਸੀਂ ਇਸ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਹੋਰ ਕੋਈ ਬਲਾਕ ਕਰੋਗੇ. ਇੱਥੇ ਅਜਿਹਾ ਕਰਨ ਲਈ CSS ਹੈ:
img.center {
ਡਿਸਪਲੇ: ਬਲਾਕ;
ਹਾਸ਼ੀਏ ਤੋਂ ਖੱਬੇ: ਆਟੋ;
ਹਾਸ਼ੀਆ-ਸੱਜਾ: ਆਟੋ;
}
ਅਤੇ ਇੱਥੇ ਇਹ ਐਚਟੀਐਮਐਲਟੀ ਹੈ ਕਿ ਚਿੱਤਰ ਲਈ ਅਸੀਂ ਕੇਂਦਰਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ:
ਤੁਸੀਂ ਇਨ-ਲਾਈਨ CSS (ਹੇਠਾਂ ਦੇਖੋ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚੀਜ਼ਾਂ ਨੂੰ ਵੀ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਇਹ ਪਹੁੰਚ ਸਿਫਾਰਸ਼ ਨਹੀਂ ਕੀਤੀ ਗਈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਡੇ HTML ਮਾਰਕਅਪ ਵਿੱਚ ਵਿਜ਼ੁਅਲ ਸਟਾਈਲ ਸ਼ਾਮਿਲ ਕਰਦਾ ਹੈ. ਯਾਦ ਰੱਖੋ, ਅਸੀਂ ਸਟਾਈਲ ਅਤੇ ਢਾਂਚਾ ਨੂੰ ਵੱਖਰਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਇਸ ਲਈ ਬ੍ਰੇਕ ਨਾਲ ਤੁਹਾਡੇ HTML ਕੋਡ ਵਿੱਚ CSS ਸ਼ੈਲੀਆਂ ਜੋੜਨੀਆਂ, ਜੋ ਕਿ ਵੱਖ ਹੋਣ ਅਤੇ, ਜਿਵੇਂ ਕਿ, ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਬਚਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.
ਸੈਂਟਰਿੰਗ ਐਲੀਮੈਂਟਸ ਵਰਟੀਿਕਲੀ CSS ਦੇ ਨਾਲ
ਸੈਂਟਰਿੰਗ ਆਬਜੈਕਟਸ ਵਰਟੀਕਲ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵਿਚ ਹਮੇਸ਼ਾ ਚੁਣੌਤੀਪੂਰਨ ਰਿਹਾ ਹੈ, ਪਰ CSS ਵਿਚ CSS ਫਲੇਬਲ ਬਾਕਸ ਲੇਆਉਟ ਮੋਡੀਊਲ ਨੂੰ ਜਾਰੀ ਕਰਨ ਨਾਲ, ਹੁਣ ਅਜਿਹਾ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ.
ਵਰਟੀਕਲ ਅਨੁਕੂਲਤਾ ਉਪਕਰਣ ਨੂੰ ਢਕਵੇਂ ਅਰੇਜੰਟਲ ਅਲਾਈਨਮੈਂਟ ਵਰਗੀ ਹੀ ਕੰਮ ਕਰਦੀ ਹੈ. CSS ਜਾਇਦਾਦ ਵਿਚਕਾਰਲੇ ਮੁੱਲ ਦੇ ਨਾਲ ਲੰਬਕਾਰੀ ਹੈ
.vcenter {
ਵਰਟੀਕਲ-ਅਲਾਈਨ: ਮੱਧ;
}
ਇਸ ਪਹੁੰਚ ਲਈ ਨਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ CSS ਫਲੈਕਬੌਕਸ ਨੂੰ ਸਮਰੱਥ ਨਹੀਂ ਕਰਦੇ ਹਨ, ਹਾਲਾਂਕਿ ਇਸ ਨਵੇਂ CSS ਲੇਆਉਟ ਵਿਧੀ ਦੇ ਆਲੇ ਦੁਆਲੇ ਹੋਰ ਅਤੇ ਹੋਰ ਜਿਆਦਾ ਆ ਰਹੇ ਹਨ! ਵਾਸਤਵ ਵਿੱਚ, ਅੱਜ ਦੇ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਹੁਣ ਇਸ CSS ਸ਼ੈਲੀ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ. ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਫੈਕਸਬੌਕਸ ਨਾਲ ਤੁਹਾਡੀਆਂ ਕੇਵਲ ਚਿੰਤਾਵਾਂ ਹੀ ਬਹੁਤ ਪੁਰਾਣੀਆਂ ਬ੍ਰਾਉਜ਼ਰ ਵਰਜਨ ਹੋਣਗੀਆਂ.
ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰਸ ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਹਨ, ਤਾਂ W3C ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਕੰਟੇਨਰ ਵਿੱਚ ਵਰਟੀਕਲ ਪਾਠ ਕੇਂਦਰ ਕਰਦੇ ਹੋ:
- ਇਕ ਤੱਤ ਦੇ ਅੰਦਰ ਤੱਤ ਰੱਖਣ ਲਈ ਤੱਤ ਪਾਉ, ਜਿਵੇਂ ਕਿ ਇਕ div
- ਸੰਮਿਲਿਤ ਐਲੀਮੈਂਟ ਤੇ ਘੱਟੋ ਘੱਟ ਉਚਾਈ ਸੈਟ ਕਰੋ.
- ਐਲਾਨ ਕਰੋ ਕਿ ਇਕ ਸਾਰਣੀ ਸੈੱਲ ਦੇ ਰੂਪ ਵਿੱਚ ਤੱਤ ਸ਼ਾਮਿਲ ਹੈ.
- ਲੰਬਕਾਰੀ ਅਨੁਕੂਲਤਾ ਨੂੰ "ਮੱਧ" ਵਿੱਚ ਸੈੱਟ ਕਰੋ.
ਉਦਾਹਰਨ ਲਈ, ਇੱਥੇ CSS ਹੈ:
.vcenter {
ਘੱਟ-ਉਚਾਈ: 12em;
ਡਿਸਪਲੇ: ਸਾਰਣੀ-ਸੈੱਲ;
ਵਰਟੀਕਲ-ਅਲਾਈਨ: ਮੱਧ;
}
ਅਤੇ ਇੱਥੇ HTML ਹੈ:
ਇਹ ਪਾਠ ਖੜ੍ਹੇ ਬਕਸੇ ਵਿਚ ਕੇਂਦਰਿਤ ਹੈ.
ਵਰਟੀਕਲ ਸੈਂਟਰਿੰਗ ਅਤੇ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣ
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ (ਆਈ.ਈ.) ਨੂੰ ਸੈਂਟਰ 'ਤੇ ਮਜਬੂਰ ਕਰਨ ਦੇ ਕੁਝ ਤਰੀਕੇ ਹਨ ਅਤੇ ਫਿਰ ਕੰਡੀਸ਼ਨਲ ਟਿਪਣੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਸਿਰਫ਼ ਆਈਐਫਈ ਹੀ ਸਟਾਈਲ ਵੇਖ ਸਕਣ, ਪਰ ਉਹ ਥੋੜ੍ਹੀ ਜਿਹੀ ਚਰਚਾ ਅਤੇ ਬਦਸੂਰਤ ਹਨ. ਚੰਗੀ ਖ਼ਬਰ ਇਹ ਹੈ ਕਿ ਮਾਈਕਰੋਸਾਫਟ ਦੇ IE ਦੇ ਪੁਰਾਣੇ ਵਰਜ਼ਨਾਂ ਲਈ ਸਮਰਥਨ ਛੱਡਣ ਦੇ ਹਾਲ ਹੀ ਦੇ ਫੈਸਲੇ ਨਾਲ, ਉਹ ਗ਼ੈਰ-ਸਹਿਯੋਗੀ ਬ੍ਰਾਉਜ਼ਰ ਜਲਦੀ ਹੀ ਆਪਣੇ ਰਾਹ ਤੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਵੈੱਬ ਡਿਜ਼ਾਇਨਰਸ ਨੂੰ CSS FlexBox ਵਰਗੇ ਆਧੁਨਿਕ ਲੇਆਉਟ ਪਹੁੰਚਾਂ ਨੂੰ ਆਸਾਨ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਸਾਰੇ CSS ਖਾਕੇ ਬਣਾ ਦੇਵੇਗਾ, ਸਾਰੇ ਵੈਬ ਡਿਜ਼ਾਇਨਰਾਂ ਲਈ ਸਿਰਫ ਸੈਂਟਰਿੰਗ, ਸੌਖਾ ਨਹੀਂ