HTML અને CSS સાથે DIV માં છબીને કેવી રીતે કેન્દ્રમાં રાખવી તે જાણો

તમે કેવી રીતે જાણવા માંગો છો DIV માં છબીને કેન્દ્રમાં રાખો? તમારા વેબ પૃષ્ઠના દેખાવ અને સંગઠનને સુધારવા માટે અને તમે પ્રદર્શિત કરવા માંગો છો તે છબીને પ્રકાશિત કરવા માટે DIV માં છબીને કેન્દ્રમાં રાખવું ઉપયોગી થઈ શકે છે. DIV માં છબીને કેન્દ્રમાં રાખો મુશ્કેલ નથી, પરંતુ તે ઘણા પરિબળો પર આધાર રાખે છે, જેમ કે છબીનો પ્રકાર, DIV નું કદ, DIV ની શૈલી, વગેરે.

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

DIV શું છે

div એ HTML એલિમેન્ટ છે જેનો ઉપયોગ થાય છે વેબ પેજમાં વિભાગો અથવા કન્ટેનર બનાવો. આમાં અન્ય ઘટકો શામેલ હોઈ શકે છે, જેમ કે ટેક્સ્ટ, છબીઓ, લિંક્સ, વગેરે. ઉપરાંત આ એક બ્લોક એલિમેન્ટ છે, જેનો અર્થ છે કે તે પૃષ્ઠની સમગ્ર પહોળાઈ અને તે લે છે તમે તેની ઊંચાઈ અને પહોળાઈને વ્યાખ્યાયિત કરી શકો છો. div એ સામાન્ય તત્વ છે, જેનો અર્થ છે કે તેનો કોઈ ચોક્કસ સિમેન્ટીક અર્થ નથી. આ કારણોસર, div ને નામ અથવા શ્રેણી આપવા માટે, તે સામાન્ય રીતે વર્ગ અથવા id લક્ષણો સાથે વપરાય છે. તે ઘણીવાર સાથે પણ વપરાય છે શૈલી વિશેષતા અથવા CSS શૈલી શીટ્સ સાથે, div ને દેખાવ અથવા ડિઝાઇન આપવા માટે.

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

છબીને આડી રીતે કેવી રીતે કેન્દ્રમાં રાખવી

DIV માં છબીને આડી રીતે કેન્દ્રમાં રાખો મતલબ કે ઇમેજને કેન્દ્રમાં ગોઠવો DIV ની પહોળાઈ. તે કરવાની ઘણી રીતો છે, પરંતુ સૌથી સામાન્ય નીચે મુજબ છે:

• ટેક્સ્ટ-એલાઈન: સેન્ટર પ્રોપર્ટીનો ઉપયોગ કરીને. આ ગુણધર્મ DIV તત્વ પર લાગુ થાય છે અને DIV ની અંદરના તમામ ઘટકોને કેન્દ્રમાં આડા સંરેખિત કરે છે. દાખ્લા તરીકે:

• માર્જિનનો ઉપયોગ કરો: ઓટો પ્રોપર્ટી. આ ગુણધર્મ IMG તત્વ પર લાગુ થાય છે અને તેને આડા કેન્દ્રમાં રાખીને ઇમેજમાં સમાન ડાબા અને જમણા માર્જિનનું કારણ બને છે. આ કામ કરવા માટે, ઇમેજમાં વ્યાખ્યાયિત પહોળાઈ હોવી જોઈએ અને બ્લોક પ્રકારની હોવી જોઈએ અથવા પ્રોપર્ટી ડિસ્પ્લે: બ્લોક હોવી જોઈએ. દાખ્લા તરીકે:

• ટ્રાન્સફોર્મ પ્રોપર્ટીનો ઉપયોગ કરીને: translateX(). આ ગુણધર્મ IMG તત્વ પર લાગુ થાય છે અને તેના કારણે ઇમેજ તેની મૂળ સ્થિતિથી ચોક્કસ અંતરે આડી રીતે ખસે છે. તેને આડા કેન્દ્રમાં રાખવા માટે, તમારે તેને તેની પહોળાઈના 50% જમણી તરફ ખસેડવું પડશે. આ કામ કરવા માટે, ઇમેજમાં વ્યાખ્યાયિત પહોળાઈ હોવી જોઈએ અને બ્લોક પ્રકારની હોવી જોઈએ અથવા પ્રોપર્ટી ડિસ્પ્લે: બ્લોક હોવી જોઈએ. દાખ્લા તરીકે:

છબીને ઊભી રીતે કેવી રીતે કેન્દ્રમાં રાખવી

DIV માં છબીને ઊભી રીતે કેન્દ્રમાં રાખો મતલબ કે DIV ની ઊંચાઈની મધ્યમાં છબીને સંરેખિત કરો. આ કરવાની ઘણી રીતો છે, પરંતુ સૌથી સામાન્ય નીચે મુજબ છે:

• વર્ટિકલ-એલાઈન પ્રોપર્ટીનો ઉપયોગ કરીને: મધ્યમ. આ ગુણધર્મ IMG તત્વ પર લાગુ થાય છે અને ટેક્સ્ટ બેઝલાઇનના સંદર્ભમાં ઇમેજને મધ્યમાં ઊભી રીતે ગોઠવવાનું કારણ બને છે. કાર્ય કરવા માટે, DIV ઘટકની નિર્ધારિત ઊંચાઈ હોવી જોઈએ અને IMG તત્વ ઇનલાઇન પ્રકારનું હોવું જોઈએ અથવા ડિસ્પ્લે: ઇનલાઇન પ્રોપર્ટી હોવી જોઈએ. દાખ્લા તરીકે:

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

• ટ્રાન્સફોર્મ પ્રોપર્ટીનો ઉપયોગ કરવો: translateY(). આ વખતે તે IMG તત્વ પર લાગુ થાય છે અને તે છબીને તેની મૂળ સ્થિતિથી ચોક્કસ અંતરે ઊભી રીતે ખસેડવાનું કારણ બને છે. તેને ઊભી રીતે કેન્દ્રમાં લાવવા માટે, તમારે તેને તેની ઊંચાઈના 50% નીચે ખસેડવું પડશે. કાર્ય કરવા માટે, DIV તત્વની નિર્ધારિત ઊંચાઈ હોવી જોઈએ અને IMG તત્વની નિર્ધારિત ઊંચાઈ હોવી જોઈએ અને બ્લોક પ્રકારનું હોવું જોઈએ અથવા ડિસ્પ્લે: બ્લોક પ્રોપર્ટી હોવી જોઈએ. દાખ્લા તરીકે:

બંને અક્ષો પર છબીને કેવી રીતે કેન્દ્રમાં રાખવી

DIV માં છબીને બંને અક્ષો પર કેન્દ્રિત કરવાનો અર્થ છે ઇમેજને પહોળાઈ અને ઊંચાઈ બંનેની મધ્યમાં સંરેખિત કરો DIV માં, આ સૌથી જટિલ છે. આ કરવાની ઘણી રીતો છે, પરંતુ સૌથી સામાન્ય નીચે મુજબ છે:

• ટેક્સ્ટ-એલાઈન: સેન્ટર પ્રોપર્ટી અને વર્ટિકલ-એલાઈન: મિડલ પ્રોપર્ટીનો ઉપયોગ કરીને. આ ગુણધર્મો અનુક્રમે DIV તત્વ અને IMG તત્વ પર લાગુ થાય છે, અને છબીને આડા અને ઊભી બંને રીતે કેન્દ્રમાં ગોઠવવાનું કારણ બને છે. આ કામ કરવા માટે, DIV ઘટકની નિર્ધારિત ઊંચાઈ હોવી જોઈએ અને IMG તત્વ ઇનલાઇન પ્રકારનું હોવું જોઈએ અથવા ડિસ્પ્લે: ઇનલાઇન પ્રોપર્ટી હોવી જોઈએ. દાખ્લા તરીકે:

• માર્જિનનો ઉપયોગ કરો: ઓટો પ્રોપર્ટી. અહીં તે IMG તત્વ પર લાગુ થાય છે અને છબીને ચારે બાજુઓ પર સમાન માર્જિન બનાવે છે, જે તેને બંને અક્ષો પર કેન્દ્રિત કરે છે. કાર્ય કરવા માટે, DIV તત્વની નિર્ધારિત ઊંચાઈ હોવી જોઈએ અને IMG તત્વની વ્યાખ્યાયિત પહોળાઈ અને ઊંચાઈ હોવી જોઈએ અને બ્લોક પ્રકારનું હોવું જોઈએ અથવા ડિસ્પ્લે: બ્લોક પ્રોપર્ટી હોવી જોઈએ. દાખ્લા તરીકે:

• ટ્રાન્સફોર્મ પ્રોપર્ટીનો ઉપયોગ કરીને: translate(). આ કિસ્સામાં તે IMG તત્વ પર લાગુ થાય છે અને બંને અક્ષોમાં છબીને તેની મૂળ સ્થિતિથી ચોક્કસ અંતરે ખસેડવાનું કારણ બને છે. તેને કેન્દ્રમાં લાવવા માટે, તમારે તેને તેની પહોળાઈના 50% જમણી તરફ અને તેની ઊંચાઈના 50% નીચે ખસેડવું પડશે. કાર્ય કરવા માટે, DIV તત્વની નિર્ધારિત ઊંચાઈ હોવી જોઈએ અને IMG તત્વમાં વ્યાખ્યાયિત પહોળાઈ અને ઊંચાઈ હોવી જોઈએ અને બ્લોક પ્રકારનું હોવું જોઈએ અથવા ડિસ્પ્લે: બ્લોક પ્રોપર્ટી હોવી જોઈએ. દાખ્લા તરીકે:

કોઈપણ છબીને કેન્દ્રમાં રાખો

DIV માં છબીને કેન્દ્રમાં રાખવું ઉપયોગી થઈ શકે છે તમારી વેબસાઇટના દેખાવ અને સંગઠનને સુધારવા માટે, અને તમે પ્રદર્શિત કરવા માંગો છો તે છબીને પ્રકાશિત કરવા માટે. DIV માં છબીને કેન્દ્રમાં રાખવી મુશ્કેલ નથી, પરંતુ તે ઘણા પરિબળો પર આધાર રાખે છે જેમ કે છબીનો પ્રકાર, DIVનું કદ, DIV ની શૈલી વગેરે.

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

અમે આશા રાખીએ છીએ કે તમને આ લેખ ગમ્યો હશે અને તમે DIV માં છબીને કેવી રીતે કેન્દ્રમાં રાખવી તે શીખ્યા છો. જો તમારી પાસે કોઈ પ્રશ્નો અથવા સૂચનો હોય, તો અમને એક ટિપ્પણી મૂકો. તમે આ લેખ તમારા મિત્રો અથવા કુટુંબીજનો સાથે પણ શેર કરી શકો છો જેમને પણ ગમે છે HTML અથવા CSS. ચાલો કામ પર જઈએ અને શેડ્યૂલ કરીએ!