سی اس ایس بندول - آسانی اور افقی توازن

ਏਲੀਮੈਂਟ ਹੰਗਮਿਚ

ਹੰਗਮਿਚ ਅਤੇ ਖੱਡਮਿਚ ਏਲੀਮੈਂਟ

ਏਲੀਮੈਂਟ ਨੂੰ ਹੰਗਮਿਚ ਕਰੋ

ਬਲਕ ਏਲੀਮੈਂਟ (ਜਿਵੇਂ <div>) ਨੂੰ ਹੰਗਮਿਚ ਕਰਨ ਲਈ margin: auto;.

ਏਲੀਮੈਂਟ ਦੀ ਚੌਡਾਈ ਨੂੰ ਸੈਟ ਕਰਨ ਨਾਲ ਇਹ ਇਸ ਦੇ ਕੰਟੇਨਰ ਦੇ ਕਿਨਾਰੇ ਤੱਕ ਫੈਲਣਾ ਰੋਕਿਆ ਜਾਵੇਗਾ。

ਤਦ, ਏਲੀਮੈਂਟ ਨੂੰ ਸਪਸ਼ਟ ਕੀਤੇ ਗਏ ਚੌਡਾਈ ਦਾ ਹੋਵੇਗਾ, ਬਾਕੀ ਜਗ੍ਹਾ ਦੋ ਬਾਹਰੀ ਮਾਰਜਿਨਾਂ ਵਿੱਚ ਸਮਾਨ ਢੰਗ ਨਾਲ ਵੰਡੀ ਜਾਵੇਗੀ:

ਇਹ div ਏਲੀਮੈਂਟ ਮੱਧਮਿਚ ਹੈ

مثال

.center {
  margin: auto;
  width: 50%;
  بوردر: 3 پیکس سولڈ گرین;
  padding: 20px;
}

خود کا تجربہ کریں

ਧਿਆਨ:ਜੇਕਰ ਇਹ ਸੈਟ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ width ਪ੍ਰਤੀਯੋਗਿਤਾ (ਜਾਂ ਇਸ ਨੂੰ 100％ ਸੈਟ ਕਰੋ) ਤਾਂ ਮੱਧਮਿਚ ਕਰਨਾ ਬੇਕਾਰ ਹੋ ਜਾਵੇਗਾ。

ਟੈਕਸਟ ਨੂੰ ਮੱਧਮਿਚ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਕੇਵਲ ਏਲੀਮੈਂਟ ਵਿੱਚ ਟੈਕਸਟ ਦਾ ਮੱਧਮਿਚ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ text-align: center;:

ਇਹ ਟੈਕਸਟ ਮੱਧਮਿਚ ਹੈ

مثال

.center {
  text-align: center;
  بوردر: 3 پیکس سولڈ گرین;
}

خود کا تجربہ کریں

خبر:ਟੈਕਸਟ ਦੇ ਮੱਧਮਿਚ ਕਰਨ ਦੇ ਕਿਵੇਂ ਕਰਨ ਦੇ ਹੋਰ ਉਦਾਹਰਣਾਂ ਲਈ ਦੇਖੋ سی اس ایس متن ਇਹ ਖੰਡ

ਚਿੱਤਰ ਨੂੰ ਮੱਧਮਿਚ ਕਰੋ

ਜੇਕਰ ਚਾਹੋ ਚਿੱਤਰ ਦਾ ਮੱਧਮਿਚ ਹੋਵੇ, ਤਾਂ ਆਉਂਦੇ ਹੋਏ ਹੱਥਾਂ ਦੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਨੂੰ ਸੈਟ ਕਰੋ autoਅਤੇ ਇਸ ਨੂੰ ਬਲਕ ਇਕਾਈ ਵਜੋਂ ਸੈਟ ਕਰੋ:

مثال

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

خود کا تجربہ کریں

ਸਮੁੱਚੀ ਸਿਰਲੇਖਤ - ਵਰਤੋਂ position

ਵਿਸ਼ੇਸ਼ਤਾ ਸਮਾਨਤਾ ਦਾ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਹੈ ਕਿ position: absolute; :

ਇਹ div ਸਮੁੱਚੀ ਸਮਾਨਤਾ ਵਾਲਾ ਹੈ。

مثال

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

خود کا تجربہ کریں

ਧਿਆਨ:ਸਮਾਨਤਾ ਦੇ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਾਧਾਰਨ ਸਟ੍ਰੀਮ ਤੋਂ ਹਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ, ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਟੋਚ ਦੇ ਹੋ ਸਕਦੇ ਹਨ。

ਸਮੁੱਚੀ ਸਿਰਲੇਖਤ - ਵਰਤੋਂ float

ਵਿਸ਼ੇਸ਼ਤਾ ਸਮਾਨਤਾ ਦਾ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਹੈ ਕਿ float ਵਿਸ਼ੇਸ਼ਤਾ:

مثال

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

خود کا تجربہ کریں

ਧਿਆਨ:ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਜੇਕਰ ਸਮਾਵੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਤੋਂ ਉੱਚਾ ਹੈ ਅਤੇ ਇਹ ਫਲੌਟ ਹੈ, ਤਾਂ ਇਹ ਆਪਣੇ ਕੰਟੇਨਰ ਵਿੱਚ ਬਾਹਰ ਨਿਕਲ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ clearfix hack ਹੱਲ ਕਰਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹਾਂ (ਦੇਖੋ ਹੇਠ ਦਾ ਉਦਾਹਰਣ)。

clearfix Hack

ਤਾਂ ਅਸੀਂ ਸਮਾਵੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ overflow: auto;ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ:

مثال

.clearfix {
  overflow: auto;
}

خود کا تجربہ کریں

ਸਮੁੱਚੀ ਸਿਰਲੇਖਤ ਮੌਜੂਦਾ - ਵਰਤੋਂ padding

CSS ਵਿੱਚ ਵੱਡੇ ਤੌਰ 'ਤੇ ਸਮੁੱਚੀ ਮੌਜੂਦਾ ਅਸਮਾਨਤਾ ਸਮਾਪਤ ਕਰਨ ਲਈ ਕਈ ਤਰੀਕੇ ਹਨ। ਇੱਕ ਸਰਲ ਸਮਾਧਾਨ ਹੈ ਕਿ

ਮੈਂ ਸਮੁੱਚੀ ਮੌਜੂਦਾ ਹਾਂ。

مثال

.center {
  padding: 70px 0;
  بوردر: 3 پیکس سولڈ گرین;
}

خود کا تجربہ کریں

ਜੇਕਰ ਤੁਸੀਂ ਸਮੁੱਚੀ ਸਿਰਲੇਖਤ ਅਤੇ ਸਮੁੱਚੀ ਮੋਜੂਦਾ ਅਦਾਨ-ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ padding ਅਤੇ text-align: center;:

میں افقی اور عمودی میں مرکز ہوں۔

مثال

.center {
  padding: 70px 0;
  بوردر: 3 پیکس سولڈ گرین;
  text-align: center;
}

خود کا تجربہ کریں

ਸਮੁੱਚੀ ਸਿਰਲੇਖਤ ਮੌਜੂਦਾ - ਵਰਤੋਂ line-height

ਇੱਕ ਹੋਰ ਟੀਚਾ ਹੈ ਕਿਇਸ ਦਾ ਮੁੱਲਬਰਾਬਰ ਹੈ height ਵਿਸ਼ੇਸ਼ਤਾ ਕੀ ਮੁੱਲ ਦਾ line-height ਵਿਸ਼ੇਸ਼ਤਾ:

میں افقی اور عمودی میں مرکز ہوں۔

مثال

.center {
  line-height: 200px;
  علائی: 200 پیکس;
  بوردر: 3 پیکس سولڈ گرین;
  text-align: center;
}
/* ਜੇਕਰ ਕਈ ਪਰਿਵਾਰ ਟੈਕਸਟ ਹਨ, ਇਸ ਕੋਡ ਨੂੰ ਜੋੜੋ: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

خود کا تجربہ کریں

ਸਮੁੱਚੀ ਸਿਰਲੇਖਤ ਮੌਜੂਦਾ - ਵਰਤੋਂ position ਅਤੇ transform

ਅਗਰ ਤੁਹਾਡਾ ਚੋਣ ਇਹ ਨਹੀਂ ਹੈ padding ਅਤੇ line-heightਤਾਂ ਇੱਕ ਹੋਰ ਸਮਾਧਾਨ ਹੈ ਕਿ position ਅਤੇ transform ਵਿਸ਼ੇਸ਼ਤਾ:

میں افقی اور عمودی میں مرکز ہوں۔

مثال

.center { 
  علائی: 200 پیکس;
  position: relative;
  بوردر: 3 پیکس سولڈ گرین; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: ਟ੍ਰਾਂਸਲੇਟ(-50%, -50%);
}

خود کا تجربہ کریں

خبر:آپ کا تجربہ کریں 2D تبدیلی اس فصیل میں ترمیم کی کی اطلاع حاصل کریں

عمودی آلائی کریں - فلیکس بکسی کا استعمال

آپ کانٹینر میں محتوا کو مرکز میں رکھ سکتے ہیں، فلیکس بکسی کا استعمال کریں۔ لطفاً یقین دہانی کریں کہ آئی ای 10 اور اس سے پچھلے کی نسلیں فلیکس بکسی کو نہیں سپورٹ کرتی ہیں:

میں افقی اور عمودی میں مرکز ہوں۔

مثال

.center {
  ڈسپلے: فلیکس;
  جسٹائفائی کانتینر: مرکز;
  الائن آئٹمز: مرکز;
  علائی: 200 پیکس;
  بوردر: 3 پیکس سولڈ گرین; 
}

خود کا تجربہ کریں

خبر:آپ میرے CSS فلیکس بکسی اس فصیل میں فلیکس بکسی کے بارے میں مزید معلومات مل رہی ہیں۔