à¨µà¨°à¨¤à© margin: auto; à¨à¨¾à¨ position: absolute; à¨¨à¨¾à¨² transform: translate(-50%, -50%);

à¨µà¨°à¨¤à© display: flex; à¨¨à¨¾à¨² justify-content: center; à¨à¨¤à© align-items: center;

à¨à©, à¨µà¨°à¨à© à¨¢à©°à¨ à¨µà¨°à¨¤ à¨à© margin: auto;, text-align: center;, à¨à¨¾à¨ position: absolute; à¨¤à©±à¨¤ à¨µà© à¨à©à¨à¨¦à¨°à¨¿à¨¤ à¨à¨° à¨¸à¨à¨¦à© à¨¹à¨¨à¥¤

CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਡਿਵ

Mia Chevalier

ਐਤਵਾਰ, 16 ਜੂਨ 2024 2:36:23 ਪੂ.ਦੁ.

CSS ਨਾਲ ਡਿਵ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਮਾਸਟਰ ਕਰਨਾ

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

ਦੂਜੇ ਦੇ ਅੰਦਰ

CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ.

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

ਹੁਕਮ	ਵਰਣਨ
display: flex;	ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
justify-content: center;	ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਆਈਟਮਾਂ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
align-items: center;	ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
place-items: center;	ਇੱਕ ਗਰਿੱਡ ਕੰਟੇਨਰ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
transform: translate(-50%, -50%);	ਕਿਸੇ ਤੱਤ ਨੂੰ ਇਸਦੀ ਆਪਣੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਦੇ 50% ਦੁਆਰਾ ਕੇਂਦਰ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।
position: absolute;	ਕਿਸੇ ਤੱਤ ਨੂੰ ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਪੁਜ਼ੀਸ਼ਨ ਵਾਲੇ ਪੂਰਵਜ ਦੇ ਅਨੁਸਾਰੀ ਸਥਿਤੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
top: 50%;	ਕਿਸੇ ਤੱਤ ਨੂੰ ਇਸ ਦੇ ਸ਼ਾਮਲ ਤੱਤ ਦੇ ਸਿਖਰ ਤੋਂ 50% ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਦਾ ਹੈ।
left: 50%;	ਕਿਸੇ ਤੱਤ ਨੂੰ ਇਸ ਦੇ ਰੱਖਣ ਵਾਲੇ ਤੱਤ ਦੇ ਖੱਬੇ ਤੋਂ 50% ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਦਾ ਹੈ।

ਫਲੈਕਸਬਾਕਸ, ਗਰਿੱਡ, ਅਤੇ ਪਰੰਪਰਾਗਤ CSS ਨਾਲ ਕੇਂਦਰਿਤ ਤੱਤ

ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਦਰਸਾਉਂਦੀ ਹੈ ਕਿ a ਨੂੰ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ

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

ਦੂਜੀ ਸਕਰਿਪਟ ਵਿੱਚ, ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ CSS Grid ਸਮਾਨ ਨਤੀਜੇ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ. ਅਪਲਾਈ ਕਰਕੇ display: grid; ਮੂਲ ਕੰਟੇਨਰ ਨੂੰ ਅਤੇ place-items: center;, ਚਾਈਲਡ ਐਲੀਮੈਂਟਸ ਲੇਟਵੇਂ ਅਤੇ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਹੁੰਦੇ ਹਨ। ਇਹ ਵਿਧੀ ਖਾਸ ਤੌਰ 'ਤੇ ਗਰਿੱਡ-ਅਧਾਰਿਤ ਖਾਕੇ ਲਈ ਲਾਭਦਾਇਕ ਹੈ। ਅੰਤ ਵਿੱਚ, ਰਵਾਇਤੀ ਵਿਧੀ ਵਿੱਚ ਸੈਟਿੰਗ ਸ਼ਾਮਲ ਹੈ position: absolute; ਬਾਲ ਤੱਤ ਅਤੇ ਵਰਤੋਂ 'ਤੇ top: 50%; ਅਤੇ left: 50%; ਨਾਲ transform: translate(-50%, -50%); ਇਸ ਨੂੰ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅੰਦਰ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ। ਇਹ ਪਹੁੰਚ ਸਥਿਰ-ਆਕਾਰ ਦੇ ਤੱਤਾਂ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ।

ਡਿਵ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਫਲੈਕਸਬਾਕਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

Flexbox ਦੇ ਨਾਲ HTML ਅਤੇ CSS

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ਗਰਿੱਡ ਨਾਲ ਇੱਕ ਡਿਵ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨਾ

ਗਰਿੱਡ ਲੇਆਉਟ ਦੇ ਨਾਲ HTML ਅਤੇ CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ਨਾਲ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਰਵਾਇਤੀ ਢੰਗ

ਮਾਰਜਿਨ ਆਟੋ ਨਾਲ HTML ਅਤੇ CSS

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

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

ਇੱਕ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਲੇਟਵੇਂ ਤੌਰ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਸ਼ਾਮਲ ਹੈ ਦੀ ਵਰਤੋਂ ਕਰਨਾ text-align: center; ਸੰਪਤੀ. ਇਹ ਪਹੁੰਚ ਖਾਸ ਤੌਰ 'ਤੇ ਇਨਲਾਈਨ-ਬਲਾਕ ਜਾਂ ਇਨਲਾਈਨ ਤੱਤਾਂ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ। ਅਪਲਾਈ ਕਰਕੇ text-align: center; ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਵਿੱਚ, ਸਾਰੇ ਚਾਈਲਡ ਐਲੀਮੈਂਟਸ ਲੇਟਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਹੋਣਗੇ। ਹਾਲਾਂਕਿ, ਇਹ ਵਿਧੀ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤਾਂ ਲਈ ਕੰਮ ਨਹੀਂ ਕਰਦੀ ਜਦੋਂ ਤੱਕ ਉਹ ਇਨਲਾਈਨ-ਬਲਾਕ ਵਿੱਚ ਤਬਦੀਲ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ margin: auto; ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤਾਂ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ। ਕਿਸੇ ਤੱਤ ਦੇ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਹਾਸ਼ੀਏ ਨੂੰ ਆਟੋ ਵਿੱਚ ਸੈੱਟ ਕਰਕੇ, ਤੁਸੀਂ ਇਸਨੂੰ ਇਸਦੇ ਮੂਲ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਤਕਨੀਕ ਸਧਾਰਨ ਹੈ ਅਤੇ ਸਥਿਰ-ਚੌੜਾਈ ਵਾਲੇ ਤੱਤਾਂ ਲਈ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ। ਫਲੈਕਸਬਾਕਸ ਅਤੇ ਗਰਿੱਡ ਵਰਗੀਆਂ ਆਧੁਨਿਕ CSS ਲੇਆਉਟ ਤਕਨੀਕਾਂ ਨਾਲ ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਨੂੰ ਜੋੜਨਾ ਲੋੜ ਅਨੁਸਾਰ ਤੱਤ ਨੂੰ ਠੀਕ ਤਰ੍ਹਾਂ ਅਲਾਈਨ ਕਰਨ ਲਈ ਇੱਕ ਵਿਆਪਕ ਟੂਲਕਿੱਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਸੈਂਟਰਿੰਗ ਐਲੀਮੈਂਟਸ ਬਾਰੇ ਆਮ ਸਵਾਲ ਅਤੇ ਜਵਾਬ

ਮੈਂ ਇੱਕ ਇਨਲਾਈਨ ਤੱਤ ਨੂੰ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਾਂ?
ਵਰਤੋ text-align: center; ਇਨਲਾਈਨ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸੈਂਟਰ ਕਰਨ ਲਈ ਪੇਰੈਂਟ ਕੰਟੇਨਰ 'ਤੇ।
ਕੀ ਮੈਂ ਹਾਸ਼ੀਏ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹਾਂ: auto; ਇੱਕ ਬਲਾਕ ਤੱਤ ਨੂੰ ਕੇਂਦਰ ਕਰਨ ਲਈ?
ਹਾਂ, ਸੈਟਿੰਗ margin: auto; ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਬਲਾਕ ਤੱਤ ਕੇਂਦਰ ਵਿੱਚ ਹੋਵੇਗਾ।
ਸੈਂਟਰਿੰਗ ਲਈ ਫਲੈਕਸਬਾਕਸ ਅਤੇ ਗਰਿੱਡ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?
Flexbox ਇੱਕ-ਅਯਾਮੀ ਲੇਆਉਟ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਦਕਿ Grid ਦੋ-ਅਯਾਮੀ ਲੇਆਉਟ ਲਈ ਹੈ।
ਮੈਂ CSS ਦੇ ਨਾਲ ਇੱਕ ਸਥਿਰ-ਚੌੜਾਈ ਵਾਲੇ ਤੱਤ ਨੂੰ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਾਂ?
ਵਰਤੋ margin: auto; ਜਾਂ position: absolute; ਨਾਲ transform: translate(-50%, -50%);
ਕੀ ਮੈਂ Flexbox ਦੇ ਨਾਲ ਤੱਤ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦਾ ਹਾਂ?
ਹਾਂ, ਵਰਤੋਂ align-items: center; ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ ਤੱਤ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ।
ਟੈਕਸਟ-ਅਲਾਈਨ ਕਰਦਾ ਹੈ: ਕੇਂਦਰ; ਬਲਾਕ ਤੱਤਾਂ ਲਈ ਕੰਮ ਕਰਦੇ ਹੋ?
ਨਹੀਂ, text-align: center; ਸਿਰਫ਼ ਇਨਲਾਈਨ ਜਾਂ ਇਨਲਾਈਨ-ਬਲਾਕ ਤੱਤਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ।
ਮੈਂ ਇੱਕ ਕੰਟੇਨਰ ਵਿੱਚ ਕਈ ਤੱਤਾਂ ਨੂੰ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਾਂ?
ਵਰਤੋ display: flex; ਨਾਲ justify-content: center; ਅਤੇ align-items: center;
ਸਥਾਨ-ਆਈਟਮਾਂ ਕੀ ਹੈ: ਕੇਂਦਰ; ਗਰਿੱਡ ਵਿੱਚ?
place-items: center; ਇੱਕ ਗਰਿੱਡ ਕੰਟੇਨਰ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਖੜ੍ਹਵੇਂ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
ਕੀ ਫਲੈਕਸਬਾਕਸ ਜਾਂ ਗਰਿੱਡ ਤੋਂ ਬਿਨਾਂ ਤੱਤਾਂ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨਾ ਸੰਭਵ ਹੈ?
ਜੀ, ਵਰਗੇ ਢੰਗ ਵਰਤ ਕੇ margin: auto;, text-align: center;, ਜਾਂ position: absolute; ਤੱਤ ਵੀ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦੇ ਹਨ।

CSS ਸੈਂਟਰਿੰਗ ਤਕਨੀਕਾਂ ਨੂੰ ਸਮੇਟਣਾ

ਵੱਖ-ਵੱਖ CSS ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਤੱਤ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਸਮਝਣਾ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਵੈਬ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਵਰਗੀਆਂ ਤਕਨੀਕਾਂ ਵਿੱਚ ਮੁਹਾਰਤ ਹਾਸਲ ਕਰਕੇ Flexbox, Grid, ਅਤੇ traditional CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਡਿਵੈਲਪਰ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹਨ ਕਿ ਉਹਨਾਂ ਦੇ ਡਿਜ਼ਾਈਨ ਕਾਰਜਸ਼ੀਲ ਅਤੇ ਸੁਹਜ ਪੱਖੋਂ ਪ੍ਰਸੰਨ ਹਨ। ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨਾ CSS ਸਮਰੱਥਾਵਾਂ ਦੀ ਡੂੰਘੀ ਸਮਝ ਪ੍ਰਦਾਨ ਕਰੇਗਾ।

CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਡਿਵ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ