CSS નો ઉપયોગ કરીને ડિવમાં ટેક્સ્ટને વર્ટિકલી સેન્ટરિંગ

Alice Dupont
શનિવાર, 13 જુલાઈ, 2024 એ 09:22:28 PM વાગ્યે
CSS

CSS સાથે ડિવની અંદર ટેક્સ્ટને વર્ટિકલી સેન્ટર કરો

ડીવીમાં ટેક્સ્ટને ઊભી રીતે સંરેખિત કરવું એ વેબ ડિઝાઇનમાં સામાન્ય પડકાર બની શકે છે. ટેક્સ્ટ સંપૂર્ણ રીતે કેન્દ્રિત છે તેની ખાતરી કરવાથી તમારી સામગ્રીની સૌંદર્ય શાસ્ત્ર અને વાંચવાની ક્ષમતામાં સુધારો થઈ શકે છે.

આ લેખમાં, અમે CSS નો ઉપયોગ કરીને div ની અંદર ટેક્સ્ટનું વર્ટિકલ સેન્ટરિંગ હાંસલ કરવા માટે વિવિધ પદ્ધતિઓનું અન્વેષણ કરીશું. અમે એક સરળ ઉદાહરણથી શરૂઆત કરીશું અને પછી વિવિધ બ્રાઉઝર્સ અને ઉપકરણોમાં સુસંગતતા સુનિશ્ચિત કરવા માટે વધુ અદ્યતન તકનીકોનો અભ્યાસ કરીશું.

આદેશ વર્ણન
display: flex; ફ્લેક્સ કન્ટેનરને વ્યાખ્યાયિત કરે છે, ફ્લેક્સબોક્સ લેઆઉટનો ઉપયોગ સક્ષમ કરે છે.
justify-content: center; ફ્લેક્સ કન્ટેનરની અંદર ફ્લેક્સ વસ્તુઓને આડી રીતે કેન્દ્રમાં રાખે છે.
align-items: center; ફ્લેક્સ કન્ટેનરની અંદર ફ્લેક્સ વસ્તુઓને ઊભી રીતે કેન્દ્રમાં રાખે છે.
display: grid; ગ્રીડ કન્ટેનરને વ્યાખ્યાયિત કરે છે, ગ્રીડ લેઆઉટના ઉપયોગને સક્ષમ કરે છે.
place-items: center; ગ્રીડ કન્ટેનરની અંદર વસ્તુઓને આડી અને ઊભી બંને રીતે કેન્દ્રમાં રાખે છે.
display: table; ટેબલ લેઆઉટ પ્રોપર્ટીઝને લાગુ કરવાની મંજૂરી આપીને, તત્વને કોષ્ટક તરીકે વ્યાખ્યાયિત કરે છે.
display: table-cell; એક તત્વને ટેબલ સેલ તરીકે વ્યાખ્યાયિત કરે છે, વર્ટિકલ સંરેખણ ગુણધર્મોને સક્ષમ કરે છે.
vertical-align: middle; ટેબલ-સેલ તત્વની અંદર સામગ્રીને વર્ટિકલી કેન્દ્રમાં રાખે છે.
line-height: 170px; લાઇનની ઊંચાઈને કન્ટેનરની ઊંચાઈની બરાબર વર્ટિકલી સેન્ટર ટેક્સ્ટ પર સેટ કરે છે.

CSS સાથે વર્ટિકલી ટેક્સ્ટને કેન્દ્રમાં રાખવા માટેની તકનીકો

પ્રથમ સ્ક્રિપ્ટ ઉદાહરણમાં, અમે ઉપયોગ કરીએ છીએ ફ્લેક્સ કન્ટેનર વ્યાખ્યાયિત કરવા માટે. આ Flexbox લેઆઉટ ગુણધર્મોના ઉપયોગને સક્ષમ કરે છે. સેટિંગ દ્વારા અને , આપણે ટેક્સ્ટને આડા અને ઊભી રીતે કેન્દ્રમાં રાખી શકીએ છીએ

તત્વ આ પદ્ધતિ અત્યંત અસરકારક અને અમલમાં સરળ છે, જે તેને આધુનિક વેબ ડિઝાઇન માટે લોકપ્રિય પસંદગી બનાવે છે. Flexbox ખાસ કરીને તેની પ્રતિભાવશીલતા અને સંરેખણની સરળતા માટે ઉપયોગી છે, જે વિકાસકર્તાઓને લેઆઉટ બનાવવા માટે પરવાનગી આપે છે જે વિવિધ સ્ક્રીન કદ અને દિશાઓ સાથે સારી રીતે અનુકૂલિત થાય છે.

બીજા સ્ક્રિપ્ટ ઉદાહરણનો ઉપયોગ કરીને CSS ગ્રીડ લેઆઉટનો ઉપયોગ કરે છે . સેટિંગ દ્વારા , ટેક્સ્ટ ગ્રીડ કન્ટેનરની અંદર આડા અને ઊભી બંને રીતે કેન્દ્રિત છે. CSS ગ્રીડ પરંપરાગત પદ્ધતિઓની તુલનામાં વેબ લેઆઉટ ડિઝાઇન કરવા માટે વધુ શક્તિશાળી અને લવચીક સિસ્ટમ પ્રદાન કરે છે. તે સરળતા સાથે જટિલ, પ્રતિભાવશીલ ડિઝાઇન બનાવવાની ક્ષમતા પ્રદાન કરે છે. આ આદેશ એ વર્ટિકલ અને હોરીઝોન્ટલ સેન્ટરિંગ હાંસલ કરવા, કોડને સરળ બનાવવા અને વાંચનક્ષમતા સુધારવાનો એક સંક્ષિપ્ત માર્ગ છે.

વર્ટિકલ સેન્ટરિંગ માટે અદ્યતન CSS તકનીકો

ત્રીજી સ્ક્રિપ્ટમાં, અમે ટેબલ ડિસ્પ્લે પદ્ધતિનો ઉપયોગ કરીએ છીએ. સેટિંગ કન્ટેનર પર અને સાથે બનાવેલ સ્યુડો-તત્વ પર અમને વાપરવા માટે પરવાનગી આપે છે vertical-align: middle; મિલકત આ પદ્ધતિ ટેબલ કોષોની વર્તણૂકની નકલ કરે છે, જે સામગ્રીને ઊભી રીતે કેન્દ્રમાં રાખવાનું શક્ય બનાવે છે. જ્યારે આધુનિક વેબ ડિઝાઇનમાં આ અભિગમ ઓછો ઉપયોગમાં લેવાય છે, તે જૂના બ્રાઉઝર્સ સાથે સુસંગતતા જાળવવા અથવા લેગસી કોડ સાથે કામ કરતી વખતે ઉપયોગી થઈ શકે છે. તે નવી લેઆઉટ સિસ્ટમ્સ પર આધાર રાખ્યા વિના સામગ્રીને કેન્દ્રમાં રાખવાની વિશ્વસનીય રીત પ્રદાન કરે છે.

ચોથું સ્ક્રિપ્ટ ઉદાહરણ આનો ઉપયોગ કરે છે મિલકત સેટ કરીને કન્ટેનરની ઊંચાઈ જેટલી, ટેક્સ્ટ ઊભી રીતે કેન્દ્રિત છે. સિંગલ-લાઇન ટેક્સ્ટ માટે આ તકનીક સીધી અને અસરકારક છે. જો કે, તે મલ્ટિ-લાઇન ટેક્સ્ટ અથવા ડાયનેમિક સામગ્રી માટે યોગ્ય ન હોઈ શકે જ્યાં કન્ટેનરની ઊંચાઈ બદલાઈ શકે છે. તેની મર્યાદાઓ હોવા છતાં, ધ પદ્ધતિ એ સરળ દૃશ્યોમાં ટેક્સ્ટને વર્ટિકલી સેન્ટરિંગ માટે ઝડપી અને સરળ ઉકેલ છે.

વર્ટિકલ સેન્ટરિંગ માટે ફ્લેક્સબોક્સનો ઉપયોગ

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 ટ્રાન્સફોર્મની શોધખોળ

a ની અંદર ટેક્સ્ટને ઊભી રીતે કેન્દ્રિત કરવા માટેની બીજી અસરકારક પદ્ધતિ CSS નો ઉપયોગ કરે છે મિલકત સંયોજન દ્વારા સાથે transform: translateY(-50%);, અમે ચોક્કસ ઊભી ગોઠવણી પ્રાપ્ત કરી શકીએ છીએ. પ્રથમ, ધ માટે સુયોજિત છે સંદર્ભ બિંદુ તરીકે કાર્ય કરવા માટે. પછી, સાથે બાળક તત્વ પિતૃ કન્ટેનરના ટોચના 50% પર સ્થિત છે. છેલ્લે, અરજી transform: translateY(-50%); તત્વને તેની પોતાની ઊંચાઈના અડધાથી ઉપર લઈ જાય છે, તેને સંપૂર્ણ રીતે ઊભી રીતે કેન્દ્રમાં રાખીને.

આ પદ્ધતિ ઉત્તમ સુગમતા પ્રદાન કરે છે અને ટેક્સ્ટ અને છબીઓ સહિત વિવિધ પ્રકારની સામગ્રી માટે સારી રીતે કાર્ય કરે છે. ગતિશીલ સામગ્રી સાથે કામ કરતી વખતે તે ખાસ કરીને ઉપયોગી છે, કારણ કે સામગ્રીની ઊંચાઈને ધ્યાનમાં લીધા વિના કેન્દ્રીય અસર સુસંગત રહે છે. વધુમાં, સંયોજન અન્ય CSS ગુણધર્મો સાથે વધુ જટિલ અને સર્જનાત્મક લેઆઉટ ડિઝાઇન માટે પરવાનગી આપે છે. જ્યારે આ અભિગમને ફ્લેક્સબોક્સ અથવા ગ્રીડની તુલનામાં થોડો વધુ કોડની જરૂર છે, તે તત્વોની સ્થિતિ પર ચોક્કસ નિયંત્રણ પ્રદાન કરે છે.

  1. ડીવીમાં ટેક્સ્ટને વર્ટિકલી સેન્ટરમાં રાખવાનો સૌથી સહેલો રસ્તો કયો છે?
  2. ઉપયોગ કરીને સાથે અને ઘણી વખત સૌથી સરળ અને સૌથી અસરકારક પદ્ધતિ છે.
  3. તમે જૂના બ્રાઉઝર્સમાં ટેક્સ્ટને વર્ટિકલી સેન્ટર કેવી રીતે કરશો?
  4. સાથે કોષ્ટક પ્રદર્શન પદ્ધતિનો ઉપયોગ કરીને અને જૂના બ્રાઉઝર્સમાં વર્ટિકલ સેન્ટરિંગ હાંસલ કરવામાં મદદ કરી શકે છે.
  5. શું CSS ગ્રીડનો ઉપયોગ ટેક્સ્ટને ઊભી રીતે કેન્દ્રમાં કરવા માટે થઈ શકે છે?
  6. હા, CSS ગ્રીડનો ઉપયોગ કરીને ટેક્સ્ટને વર્ટિકલી સેન્ટર કરી શકે છે અને .
  7. શું મલ્ટિ-લાઇન ટેક્સ્ટને ઊભી રીતે કેન્દ્રમાં રાખવું શક્ય છે?
  8. હા, ફ્લેક્સબોક્સ અથવા CSS ગ્રીડનો ઉપયોગ કરીને કન્ટેનરની અંદર મલ્ટિ-લાઇન ટેક્સ્ટને સરળતાથી કેન્દ્રમાં રાખી શકાય છે.
  9. તમે જાણીતા કન્ટેનરની ઊંચાઈ સાથે ટેક્સ્ટને વર્ટિકલી સેન્ટર કેવી રીતે કરશો?
  10. તમે સેટ કરી શકો છો ટેક્સ્ટને અસરકારક રીતે કેન્દ્રમાં રાખીને કન્ટેનરની ઊંચાઈ સાથે મેળ ખાતી મિલકત.
  11. જો કન્ટેનરની ઊંચાઈ ગતિશીલ હોય તો શું?
  12. ફ્લેક્સબોક્સ, ગ્રીડ અથવા નો ઉપયોગ કરીને મિલકત ગતિશીલ કન્ટેનરની ઊંચાઈઓ સાથે પણ, સુસંગત વર્ટિકલ સેન્ટરિંગની ખાતરી કરે છે.
  13. ઉપયોગ કરવા માટે કોઈ ખામીઓ છે ?
  14. અસરકારક હોવા છતાં, તે માતાપિતા પાસે હોવું જરૂરી છે અને ફ્લેક્સબોક્સ અથવા ગ્રીડની તુલનામાં અમલમાં મૂકવા માટે થોડું વધુ જટિલ હોઈ શકે છે.
  15. રિસ્પોન્સિવ ડિઝાઇનમાં તમે ટેક્સ્ટને વર્ટિકલી સેન્ટર કેવી રીતે કરશો?
  16. ફ્લેક્સબોક્સ અથવા CSS ગ્રીડનો ઉપયોગ પ્રતિભાવશીલ ડિઝાઇન માટે ખૂબ જ ભલામણ કરવામાં આવે છે, કારણ કે તે વિવિધ સ્ક્રીન કદ અને દિશાઓ સાથે સારી રીતે અનુકૂલન કરે છે.

ડિવમાં ટેક્સ્ટનું વર્ટિકલ સેન્ટરિંગ હાંસલ કરવું ઘણી અસરકારક પદ્ધતિઓ દ્વારા પરિપૂર્ણ કરી શકાય છે. ફ્લેક્સબોક્સ અને ગ્રીડ જેવી આધુનિક તકનીકો અમલીકરણમાં સૌથી વધુ સુગમતા અને સરળતા પ્રદાન કરે છે. જૂની પદ્ધતિઓ, જેમ કે ટેબલ ડિસ્પ્લે અને લાઇન-ઊંચાઈ, હજુ પણ ચોક્કસ કિસ્સાઓમાં ઉપયોગી થઈ શકે છે. આ વિવિધ અભિગમોને સમજવા અને લાગુ કરીને, વિકાસકર્તાઓ ખાતરી કરી શકે છે કે તેમની સામગ્રી દૃષ્ટિની આકર્ષક છે અને વિવિધ ઉપકરણો અને બ્રાઉઝર્સમાં યોગ્ય રીતે સંરેખિત છે.