એકંદરે ડિઝાઇન માટે વેબ પૃષ્ઠ પર આઇટમ્સનું સ્થાન જરૂરી છે. તેમ છતાં લેઆઉટને પ્રભાવિત કરવાની અન્ય રીતો છે, જેમ કે કોષ્ટકોનો ઉપયોગ કરવો ( જે અમે ભલામણ કરતા નથી ), શ્રેષ્ઠ CSS નો ઉપયોગ કરવો .
નીચે, અમે ઈમેજો, કોષ્ટકો, ફકરા અને વધુને સંરેખિત કરવા માટે સરળ CSS શૈલી ઇન-લાઇન પ્રોપર્ટીનો ઉપયોગ કેવી રીતે કરવો તે જુઓ.
નોંધ: આ જ પદ્ધતિઓ બાહ્ય સ્ટાઇલ શીટ્સ પર પણ ઉપયોગ કરી શકાય છે, પણ કારણ કે તે વ્યક્તિગત વસ્તુઓ પર લાગુ પડે છે અને તે રીતે રહેવાની સંભવિત જરૂર છે, નીચે જણાવેલી બાબતોની જેમ ઇન-લાઇન સ્ટાઇલનો ઉપયોગ કરવાનું શ્રેષ્ઠ છે.
સંરેખિત પાઠ ફકરા
ફકરો ટેગ એ તમારા વેબ પૃષ્ઠને મૂકવાનું શરૂ કરવા માટેનું પ્રથમ સ્થાન છે. તે ખુલે છે અને બંધ ટૅગ્સ આના જેવો દેખાય છે:
ફકરામાં ટેક્સ્ટનું ડિફોલ્ટ સંરેખણ પૃષ્ઠની ડાબી બાજુ પર છે, પણ તમે તમારા ફકરાને જમણી અને મધ્યમાં સંરેખિત કરી શકો છો.
ફ્લોટ પ્રોપર્ટીની મદદથી તમે ફકરાને પેરેન્ટ એલિમેન્ટની જમણા અથવા ડાબામાં ગોઠવી શકો છો. તે પેન્ટન્ટ એલિમેન્ટની અંદરની કોઈ પણ ઘટક ફ્લોટિંગ એલિમેન્ટની આસપાસ ફરતા હશે.
ફકરા સાથે શ્રેષ્ઠ અસર મેળવવા માટે, પેરેંટ પર પહોળાઈ સેટ કરવાનું શ્રેષ્ઠ છે જે કન્ટેનર (પિતૃ) તત્વ કરતા નાની છે.
ટેક્સ્ટ ઇનસાઇડ ફકરા ગોઠવો
અલબત્ત, ફકરા લખાણ માટે સૌથી વધુ રસપ્રદ સંરેખણ "સર્મથન" છે, જે બ્રાઉઝરને વિંડોના જમણા અને ડાબી બાજુઓ માટે, ગોઠવાયેલ લખાણ દર્શાવવા માટે કહે છે.
ફકરામાં ટેક્સ્ટને સર્મથિત કરવા માટે, તમે ટેક્સ્ટ-સંરેખિત મિલકતનો ઉપયોગ કરશો.
ટેક્સ્ટ-સંરેખિત ગુણધર્મનો ઉપયોગ કરીને, તમે ફકરાની અંદરની તમામ ટેક્સ્ટને જમણી બાજુ અથવા ડાબે (મૂળભૂત) માં ગોઠવી શકો છો.
ટેક્સ્ટ-સંરેખિત ગુણધર્મ એલિમેન્ટની અંદરની ટેક્સ્ટને સંરેખિત કરશે. પારિભાષિક રીતે, તે ફકરો અથવા અન્ય ઘટકોની અંદર રહેલી છબીઓને સંરેખિત કરવા માટે માનવામાં આવતી નથી, પરંતુ મોટાભાગના બ્રાઉઝર્સ છબીઓને આ ગુણધર્મની ઇનલાઇન તરીકે સંગ્રહ કરે છે.
સંરેખિત છબીઓ
ઇમેજ ટૅગ પર ફ્લોટ પ્રોપર્ટીનો ઉપયોગ કરીને તમે પૃષ્ઠ પર છબીઓની પ્લેસમેન્ટને વ્યાખ્યાયિત કરી શકો છો અને ટેક્સ્ટ તેમના આસપાસ કેવી રીતે લપેટી શકો છો.
ઉપરના ફકરાઓની જેમ, ઇમેજ ટેગમાં ફ્લોટ શૈલીની પ્રોપર્ટી પેજ પરની તમારી ઇમેજને સ્થાનાંતરિત કરશે અને ટેક્સ્ટને કેવી રીતે ફ્લોર કરવું અને તે ઈમેજની આસપાસ અન્ય ઘટકોને કેવી રીતે ચલાવવું તે બ્રાઉઝરને કહે છે.
ઉપરોક્ત છબી ટેગને અનુસરીને ટેક્સ્ટને સ્ક્રીનની ડાબી બાજુએ છબી ડિસ્પ્લે તરીકે જમણી બાજુએ ખસેડવામાં આવશે.
જો હું ટેક્સ્ટને છબીની આસપાસ વીંટાળવાનું બંધ કરવા માંગું છું, તો હું સ્પષ્ટ મિલકતનો ઉપયોગ કરું છું:
style="clear: left
ફકરો કરતાં વધુ ગોઠવવું
જો કે, જો તમે માત્ર એક ફકરો અથવા એક છબી કરતાં વધુ સંરેખિત કરવા માંગો છો? તમે સરળતાથી દરેક ફકરામાં એક સ્ટાઇલ પ્રોપર્ટી મૂકી શકો છો, પરંતુ તે ટેગ છે જે તમે ઉપયોગ કરી શકો છો તે વધુ અસરકારક છે:
ટેગ અને સ્ટાઇલ પ્રોપર્ટી (ફ્લોટ અથવા ટેક્સ્ટ સંરેખિત) સાથે ટેક્સ્ટ અને છબીઓ ( એચટીએમએલ ટેગ સહિત) ને ફક્ત ફરતે કરો અને તે ડિવિઝનની બધી વસ્તુઓ તમે કેવી રીતે મેળવશો તે સાથે ગોઠવાશે.
ધ્યાનમાં રાખો કે વિભાગમાં ફકરા અથવા છબીઓમાં ઉમેરવામાં આવતી ગોઠવણીને સન્માનિત કરવામાં આવશે, ટેગને ઓવરરાઇડ કરીને.