CSS vertical-align ਪ੍ਰਾਪਰਟੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

vertical-align ਵਿਸ਼ੇਸ਼ਤਾ ਐਲੀਮੈਂਟ ਦੇ ਵਿਸਤਾਰ ਨੂੰ ਵਿਸਤਾਰਿਤ ਕਰਦੀ ਹੈ。

ਵਰਣਨ

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਲਾਈਨ ਇਨ ਐਲੀਮੈਂਟ ਦੇ ਬੇਸਲਾਈਨ ਦੇ ਮੁੱਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ। ਨੈਗਟਿਵ ਲੰਬਾਈ ਮੁੱਲ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨ ਦੀ ਪ੍ਰਵਾਨਗੀ ਹੈ। ਟੇਬਲ ਸੈੱਲ ਵਿੱਚ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਸੈੱਲ ਦੇ ਫਰੇਮ ਵਿੱਚ ਸੈੱਲ ਦੇ ਸਮੱਗਰੀ ਦੇ ਸਥਾਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਹੋਰ ਦੇਖੋ:

CSS ਸਿੱਖਿਆ:CSS ਟੈਕਸਟ

HTML DOM ਸੂਚਨਾਕੋਸ਼:verticalAlign ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਇੱਕ ਚਿੱਤਰ ਦੇ ਵਿਸਤਾਰ ਨੂੰ ਵਿਸਤਾਰਿਤ ਕਰੋ

img
  {
  vertical-align:text-top;
  }

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੰਟਾ

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
baseline ਮੂਲ ਮੁੱਲ। ਐਲੀਮੈਂਟ ਪਿਤਾ ਐਲੀਮੈਂਟ ਦੇ ਬੇਸਲਾਈਨ ਨਾਲ ਸਮਾਨ ਕਰੋ
sub ਟੈਕਸਟ ਦੇ ਨੀਚੇ ਸੂਬੇ ਦੇ ਵਿਸਤਾਰ ਨੂੰ ਵਿਸਤਾਰਿਤ ਕਰੋ
super ਟੈਕਸਟ ਦੇ ਉੱਚੇ ਸੂਬੇ ਦੇ ਵਿਸਤਾਰ ਨੂੰ ਵਿਸਤਾਰਿਤ ਕਰੋ
top ਐਲੀਮੈਂਟ ਦੀ ਸਭ ਤੋਂ ਉੱਚੀ ਲਿਖਤ ਦੀ ਸਮਾਨ ਪਟੜੀ ਨਾਲ ਸਮਾਨ ਕਰੋ
text-top ਐਲੀਮੈਂਟ ਦੀ ਸਭ ਤੋਂ ਉੱਚੀ ਲਿਖਤ ਦੀ ਸਮਾਨ ਪਟੜੀ ਨਾਲ ਸਮਾਨ ਕਰੋ
middle ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਪਿਤਾ ਐਲੀਮੈਂਟ ਦੇ ਮੱਧ ਵਿੱਚ ਰੱਖੋ。
bottom ਐਲੀਮੈਂਟ ਦੀ ਸਭ ਤੋਂ ਨੀਚੀ ਲਿਖਤ ਦੀ ਸਮਾਨ ਪਟੜੀ ਨਾਲ ਸਮਾਨ ਕਰੋ。
text-bottom ਐਲੀਮੈਂਟ ਦੀ ਨੀਚੀ ਪਟੜੀ ਨੂੰ ਪਿਤਾ ਐਲੀਮੈਂਟ ਦੀ ਲਿਖਤ ਦੀ ਨੀਚੀ ਪਟੜੀ ਨਾਲ ਸਮਾਨ ਕਰੋ。
length 　
% ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਜਗ੍ਹਾ ਰੱਖਣ ਲਈ "line-height" ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਦਾ ਇਸਤੇਮਾਲ ਕਰੋ। ਨੈਗਟਿਵ ਮੁੱਲ ਦੀ ਪ੍ਰਵਾਨਗੀ ਹੈ。
inherit ਪਿਤਾ ਐਲੀਮੈਂਟ ਤੋਂ vertical-align ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਮੁੱਲ ਲੈਣਾ ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: baseline
ਵਿਰਾਸਤੀਕਰਣ: no
ਸੰਸਕਰਣ: CSS1
JavaScript ਗਰੰਟਾ object.style.verticalAlign="bottom"

ਹੋਰ ਉਦਾਹਰਣ

ਵਿਸਤਰੀ ਤਰੀਕੇ ਨਾਲ ਚਿੱਤਰ ਵਿਸਤਾਰਿਤ ਕਰੋ
ਇਸ ਪ੍ਰਯੋਗ ਵਿੱਚ ਕਿਵੇਂ ਟੈਕਸਟ ਵਿੱਚ ਵਿਸਤਰੀ ਤਰੀਕੇ ਨਾਲ ਚਿੱਤਰ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਦਿਖਾਇਆ ਗਿਆ ਹੈ。

ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਹੋਣ ਵਾਲੇ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਸਾਰੇ ਪੰਨਿਆਂ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ。

ਚਰੋਮੇ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
1.0 4.0 1.0 1.0 4.0