CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਡਿਵ ਵਿੱਚ ਵਰਟੀਕਲ ਟੈਕਸਟ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨਾ

CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਡਿਵ ਵਿੱਚ ਵਰਟੀਕਲ ਟੈਕਸਟ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨਾ
CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਡਿਵ ਵਿੱਚ ਵਰਟੀਕਲ ਟੈਕਸਟ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨਾ
Alice Dupont
ਸ਼ਨਿੱਚਰਵਾਰ, 13 ਜੁਲਾਈ 2024 10:03:34 ਬਾ.ਦੁ.

CSS ਦੇ ਨਾਲ ਇੱਕ ਡਿਵ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਨੂੰ ਵਰਟੀਕਲ ਸੈਂਟਰ ਕਰੋ

ਇੱਕ ਡਿਵੀ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਇਕਸਾਰ ਕਰਨਾ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਇੱਕ ਆਮ ਚੁਣੌਤੀ ਹੋ ਸਕਦੀ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਟੈਕਸਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੇਂਦਰਿਤ ਹੈ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਦੇ ਸੁਹਜ ਅਤੇ ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਸਕਦਾ ਹੈ।

ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ div ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਦੀ ਲੰਬਕਾਰੀ ਕੇਂਦਰੀਕਰਨ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ। ਅਸੀਂ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਨ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਅਤੇ ਫਿਰ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਅਨੁਕੂਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਹੋਰ ਤਕਨੀਕੀ ਤਕਨੀਕਾਂ ਦੀ ਖੋਜ ਕਰਾਂਗੇ।

ਹੁਕਮ ਵਰਣਨ
display: flex; ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, flexbox ਲੇਆਉਟ ਦੀ ਵਰਤੋਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
justify-content: center; ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
align-items: center; ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
display: grid; ਇੱਕ ਗਰਿੱਡ ਕੰਟੇਨਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਗਰਿੱਡ ਲੇਆਉਟ ਦੀ ਵਰਤੋਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
place-items: center; ਇੱਕ ਗਰਿੱਡ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਆਈਟਮਾਂ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
display: table; ਇੱਕ ਤੱਤ ਨੂੰ ਇੱਕ ਸਾਰਣੀ ਦੇ ਤੌਰ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਟੇਬਲ ਲੇਆਉਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
display: table-cell; ਇੱਕ ਤੱਤ ਨੂੰ ਇੱਕ ਸਾਰਣੀ ਸੈੱਲ ਦੇ ਰੂਪ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਲੰਬਕਾਰੀ ਅਲਾਈਨਮੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
vertical-align: middle; ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਇੱਕ ਸਾਰਣੀ-ਸੈੱਲ ਤੱਤ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
line-height: 170px; ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਦੇ ਬਰਾਬਰ ਲਾਈਨ ਦੀ ਉਚਾਈ ਨੂੰ ਵਰਟੀਕਲ ਸੈਂਟਰ ਟੈਕਸਟ ਲਈ ਸੈੱਟ ਕਰਦਾ ਹੈ।

CSS ਨਾਲ ਵਰਟੀਕਲ ਟੈਕਸਟ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਦੀਆਂ ਤਕਨੀਕਾਂ

ਪਹਿਲੀ ਸਕਰਿਪਟ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ display: flex; ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ. ਇਹ Flexbox ਲੇਆਉਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। ਸੈੱਟ ਕਰਕੇ justify-content: center; ਅਤੇ align-items: center;, ਅਸੀਂ ਟੈਕਸਟ ਨੂੰ ਲੇਟਵੇਂ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹਾਂ

ਤੱਤ. ਇਹ ਵਿਧੀ ਬਹੁਤ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਅਤੇ ਲਾਗੂ ਕਰਨ ਲਈ ਸਧਾਰਨ ਹੈ, ਇਸ ਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਲਈ ਇੱਕ ਪ੍ਰਸਿੱਧ ਵਿਕਲਪ ਬਣਾਉਂਦੀ ਹੈ। Flexbox ਖਾਸ ਤੌਰ 'ਤੇ ਇਸਦੀ ਜਵਾਬਦੇਹੀ ਅਤੇ ਅਨੁਕੂਲਤਾ ਦੀ ਸੌਖ ਲਈ ਲਾਭਦਾਇਕ ਹੈ, ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਲੇਆਉਟ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜੋ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਅਤੇ ਸਥਿਤੀਆਂ ਦੇ ਅਨੁਕੂਲ ਹੋਣ।

ਦੂਜੀ ਸਕ੍ਰਿਪਟ ਉਦਾਹਰਨ ਵਰਤ ਕੇ CSS ਗਰਿੱਡ ਲੇਆਉਟ ਨੂੰ ਨਿਯੁਕਤ ਕਰਦੀ ਹੈ display: grid;. ਸੈੱਟ ਕਰਕੇ place-items: center;, ਟੈਕਸਟ ਗਰਿੱਡ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਹੈ। CSS ਗਰਿੱਡ ਰਵਾਇਤੀ ਤਰੀਕਿਆਂ ਦੇ ਮੁਕਾਬਲੇ ਵੈੱਬ ਲੇਆਉਟ ਡਿਜ਼ਾਈਨ ਕਰਨ ਲਈ ਵਧੇਰੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਲਚਕਦਾਰ ਪ੍ਰਣਾਲੀ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ। ਇਹ ਆਸਾਨੀ ਨਾਲ ਗੁੰਝਲਦਾਰ, ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਦ place-items: center; ਕਮਾਂਡ ਵਰਟੀਕਲ ਅਤੇ ਹਰੀਜੱਟਲ ਸੈਂਟਰਿੰਗ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ, ਕੋਡ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਅਤੇ ਪੜ੍ਹਨਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਦਾ ਇੱਕ ਸੰਖੇਪ ਤਰੀਕਾ ਹੈ।

ਵਰਟੀਕਲ ਸੈਂਟਰਿੰਗ ਲਈ ਉੱਨਤ CSS ਤਕਨੀਕਾਂ

ਤੀਜੀ ਸਕਰਿਪਟ ਵਿੱਚ, ਅਸੀਂ ਟੇਬਲ ਡਿਸਪਲੇ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਸੈਟਿੰਗ display: table; ਕੰਟੇਨਰ 'ਤੇ ਅਤੇ display: table-cell; ਨਾਲ ਬਣਾਏ ਗਏ ਇੱਕ ਸੂਡੋ-ਤੱਤ 'ਤੇ ::before ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ vertical-align: middle; ਸੰਪਤੀ. ਇਹ ਵਿਧੀ ਟੇਬਲ ਸੈੱਲਾਂ ਦੇ ਵਿਵਹਾਰ ਦੀ ਨਕਲ ਕਰਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਸਮੱਗਰੀ ਨੂੰ ਲੰਬਕਾਰੀ ਕੇਂਦਰਿਤ ਕਰਨਾ ਸੰਭਵ ਹੋ ਜਾਂਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਇਹ ਪਹੁੰਚ ਆਧੁਨਿਕ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਘੱਟ ਵਰਤੀ ਜਾਂਦੀ ਹੈ, ਇਹ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਨਾਲ ਅਨੁਕੂਲਤਾ ਬਣਾਈ ਰੱਖਣ ਲਈ ਜਾਂ ਪੁਰਾਤਨ ਕੋਡ ਨਾਲ ਨਜਿੱਠਣ ਲਈ ਉਪਯੋਗੀ ਹੋ ਸਕਦੀ ਹੈ। ਇਹ ਨਵੇਂ ਲੇਆਉਟ ਸਿਸਟਮਾਂ 'ਤੇ ਭਰੋਸਾ ਕੀਤੇ ਬਿਨਾਂ ਸਮੱਗਰੀ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਦਾ ਇੱਕ ਭਰੋਸੇਯੋਗ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਚੌਥੀ ਸਕ੍ਰਿਪਟ ਉਦਾਹਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ line-height ਸੰਪਤੀ. ਸੈੱਟ ਕਰਕੇ line-height ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਦੇ ਬਰਾਬਰ, ਟੈਕਸਟ ਲੰਬਕਾਰੀ ਕੇਂਦਰਿਤ ਹੈ। ਇਹ ਤਕਨੀਕ ਸਿੰਗਲ-ਲਾਈਨ ਟੈਕਸਟ ਲਈ ਸਿੱਧੀ ਅਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਮਲਟੀ-ਲਾਈਨ ਟੈਕਸਟ ਜਾਂ ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਲਈ ਢੁਕਵਾਂ ਨਹੀਂ ਹੋ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਬਦਲ ਸਕਦੀ ਹੈ। ਇਸ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਬਾਵਜੂਦ, line-height ਵਿਧੀ ਸਧਾਰਨ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਵਰਟੀਕਲ ਸੈਂਟਰਿੰਗ ਟੈਕਸਟ ਲਈ ਇੱਕ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਹੱਲ ਹੈ।

ਵਰਟੀਕਲ ਸੈਂਟਰਿੰਗ ਲਈ ਫਲੈਕਸਬਾਕਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

CSS ਫਲੈਕਸਬਾਕਸ

#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 ਟ੍ਰਾਂਸਫਾਰਮ ਦੀ ਪੜਚੋਲ ਕਰਨਾ

ਏ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਨੂੰ ਲੰਬਕਾਰੀ ਕੇਂਦਰਿਤ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ div CSS ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ transform ਜਾਇਦਾਦ. ਮਿਲਾ ਕੇ position: absolute; ਨਾਲ transform: translateY(-50%);, ਅਸੀਂ ਸਟੀਕ ਵਰਟੀਕਲ ਅਲਾਈਨਮੈਂਟ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਪਹਿਲਾਂ, ਦ div ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ position: relative; ਇੱਕ ਹਵਾਲਾ ਬਿੰਦੂ ਦੇ ਤੌਰ ਤੇ ਕੰਮ ਕਰਨ ਲਈ. ਫਿਰ, ਨਾਲ ਇੱਕ ਬਾਲ ਤੱਤ position: absolute; ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਦੇ ਸਿਖਰ 50% 'ਤੇ ਸਥਿਤ ਹੈ। ਅੰਤ ਵਿੱਚ, ਅਰਜ਼ੀ transform: translateY(-50%); ਤੱਤ ਨੂੰ ਇਸਦੀ ਆਪਣੀ ਉਚਾਈ ਦੇ ਅੱਧੇ ਤੱਕ ਉੱਪਰ ਲੈ ਜਾਂਦਾ ਹੈ, ਇਸਨੂੰ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।

ਇਹ ਵਿਧੀ ਬਹੁਤ ਵਧੀਆ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ ਅਤੇ ਟੈਕਸਟ ਅਤੇ ਚਿੱਤਰਾਂ ਸਮੇਤ ਕਈ ਕਿਸਮਾਂ ਦੀ ਸਮੱਗਰੀ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦੀ ਹੈ। ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ, ਕਿਉਂਕਿ ਕੇਂਦਰਿਤ ਪ੍ਰਭਾਵ ਸਮੱਗਰੀ ਦੀ ਉਚਾਈ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਇਕਸਾਰ ਰਹਿੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੋੜਨਾ transform ਹੋਰ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਨਾਲ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਅਤੇ ਰਚਨਾਤਮਕ ਲੇਆਉਟ ਡਿਜ਼ਾਈਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਇਸ ਪਹੁੰਚ ਲਈ ਫਲੈਕਸਬਾਕਸ ਜਾਂ ਗਰਿੱਡ ਦੇ ਮੁਕਾਬਲੇ ਥੋੜਾ ਹੋਰ ਕੋਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਇਹ ਤੱਤਾਂ ਦੀ ਸਥਿਤੀ 'ਤੇ ਸਹੀ ਨਿਯੰਤਰਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ।

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. ਹਾਂ, ਫਲੈਕਸਬਾਕਸ ਜਾਂ CSS ਗਰਿੱਡ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਮਲਟੀ-ਲਾਈਨ ਟੈਕਸਟ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
  9. ਤੁਸੀਂ ਕਿਸੇ ਜਾਣੇ-ਪਛਾਣੇ ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਦੇ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਵਰਟੀਕਲ ਸੈਂਟਰ ਕਿਵੇਂ ਕਰਦੇ ਹੋ?
  10. ਤੁਸੀਂ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ line-height ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ, ਟੈਕਸਟ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹੋਏ।
  11. ਜੇ ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਗਤੀਸ਼ੀਲ ਹੈ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
  12. ਫਲੈਕਸਬਾਕਸ, ਗਰਿੱਡ, ਜਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ transform ਸੰਪਤੀ ਇਕਸਾਰ ਲੰਬਕਾਰੀ ਕੇਂਦਰੀਕਰਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ, ਭਾਵੇਂ ਗਤੀਸ਼ੀਲ ਕੰਟੇਨਰ ਉਚਾਈਆਂ ਦੇ ਨਾਲ।
  13. ਕੀ ਵਰਤੋਂ ਵਿੱਚ ਕੋਈ ਕਮੀਆਂ ਹਨ transform: translateY(-50%);?
  14. ਅਸਰਦਾਰ ਹੋਣ ਦੇ ਬਾਵਜੂਦ, ਇਹ ਮਾਤਾ-ਪਿਤਾ ਕੋਲ ਹੋਣਾ ਜ਼ਰੂਰੀ ਹੈ position: relative; ਅਤੇ ਫਲੈਕਸਬਾਕਸ ਜਾਂ ਗਰਿੱਡ ਦੇ ਮੁਕਾਬਲੇ ਲਾਗੂ ਕਰਨ ਲਈ ਥੋੜ੍ਹਾ ਹੋਰ ਗੁੰਝਲਦਾਰ ਹੋ ਸਕਦਾ ਹੈ।
  15. ਤੁਸੀਂ ਇੱਕ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਲੰਬਕਾਰੀ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹੋ?
  16. ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨਾਂ ਲਈ ਫਲੈਕਸਬਾਕਸ ਜਾਂ CSS ਗਰਿੱਡ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਕਿਉਂਕਿ ਉਹ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਅਤੇ ਸਥਿਤੀਆਂ ਦੇ ਅਨੁਕੂਲ ਹੁੰਦੇ ਹਨ।

ਵਰਟੀਕਲ ਸੈਂਟਰਿੰਗ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਇੱਕ div ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਦੀ ਲੰਬਕਾਰੀ ਕੇਂਦਰੀਕਰਨ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਕਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਿਆਂ ਦੁਆਰਾ ਪੂਰਾ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਫਲੈਕਸਬਾਕਸ ਅਤੇ ਗਰਿੱਡ ਵਰਗੀਆਂ ਆਧੁਨਿਕ ਤਕਨੀਕਾਂ ਸਭ ਤੋਂ ਵੱਧ ਲਚਕਤਾ ਅਤੇ ਲਾਗੂ ਕਰਨ ਦੀ ਸੌਖ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੀਆਂ ਹਨ। ਪੁਰਾਣੇ ਢੰਗ, ਜਿਵੇਂ ਕਿ ਟੇਬਲ ਡਿਸਪਲੇਅ ਅਤੇ ਲਾਈਨ-ਹਾਈਟ, ਅਜੇ ਵੀ ਖਾਸ ਮਾਮਲਿਆਂ ਵਿੱਚ ਉਪਯੋਗੀ ਹੋ ਸਕਦੇ ਹਨ। ਇਹਨਾਂ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝਣ ਅਤੇ ਲਾਗੂ ਕਰਨ ਦੁਆਰਾ, ਡਿਵੈਲਪਰ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹਨ ਕਿ ਉਹਨਾਂ ਦੀ ਸਮਗਰੀ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਹੈ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਹੈ।