ድር ጣቢያዎችን በሚገነቡበት ጊዜ ምስሎችን ማዕከል ያድርጉ, ጽሑፍን ይሰብኩ እና ያግዱ
እንዴት ድር ጣቢያዎችን እንደሚገነቡ እየተማሩ ከሆነ ዋና ማድረግ ያለብዎ ወሳኝ ዘዴዎች በአሳሽ መስኮት ውስጥ ያሉ ነገሮችን እንዴት እንደሚያደርጉት ነው. ይህ በገጹ ላይ ምስልን ማተኮር ማለት ሊሆን ይችላል, ወይም እንደ ንድፍ አካል አካል እንደ ርዕሰ ዜናዎች ማእከላዊ ማሳያ ሊሆን ይችላል.
ይህ ማዕከላዊ ምስሎችን ወይም ጽሑፎችን ወይንም ሙሉውን የድረ-ገጽዎ መገልበጥ ለማከናወን የሚቻልበት ትክክለኛ መንገድ በኮከብ የተዘረጋ የዲቪዥን ሉሆች (ሲኤስኤስ) በመጠቀም ነው. ለማብራሪያነት አብዛኛዎቹ ባህሪያት ከ កំណែ 10 ጀምሮ በሲኤስኤስ ውስጥ ነበሩ, እና በ CSS3 እና ዘመናዊ የድር አሳሾች ላይ ጥሩ ሆነው ይሰራሉ.
ልክ እንደ በርካታ የድረ ገጽ ንድፎች ሁሉ, በድረ-ገጽ ላይ CSS ን ወደ መሃል ክፍሎችን ለመጠቀም በርካታ መንገዶች አሉ. ይህ ዓይነቱን መልክ ለማሳየት CSS ን ለመጠቀም የተለያዩ መንገዶችን እንመልከት.
ኤች.ቲ.ኤም.ኤል. ወደ ማዕከላዊ ኤለመንቶች አጠቃቀም
ለመጀመሪያ የድረ-ገጽ ንድፍ ባለሙያዎች በሲኤስ ውስጥ ማካተት ተግዳሮቶች ሊሆኑ ይችላሉ. ምክንያቱም አንድ ይህንን ምስላዊ ቅጦች ለማሟላት ብዙ የተለያዩ መንገዶች አሉ. የተለያዩ የተለያዩ ዘዴዎች መልካም ሊሆኑ ይችላሉ ወይንም ወቅታዊነት ያላቸው ሁሉም የችግሮች ቴክኒኮች ሁሉ በእያንዳንዱ ነገር ላይ እንደማይሠሩ የሚያውቁ የድር ገንቢዎች, ይህ በጣም ዘመናዊ የሆኑ የተለያዩ ዘዴዎች እንደመሆናቸው መጠን የትኛውን አቀራረብ መጠቀም እንዳለባቸው ማወቅ ያስፈልጋቸዋል. ማድረግ ያለብዎት ከሁሉ የተሻለው መንገድ ጥቂት አቀራረቦችን ግንዛቤ ማግኘት ነው. እነሱን መጠቀም ሲጀምሩ የትኛው ዘዴ በተሻለ ሁኔታ እንደሚሰራ ይማራሉ.
በከፍተኛው ደረጃ, ሲኤስኤስ ለመጠቀም ይችላሉ:
- የመሃል ጽሑፍ
- የንጥል ደረጃ አባልን (እንደ ማካፈል)
- አንድ ምስል
- በድልድል ማእከል ወይም ምስል አኑር
ከብዙ (ዓመታት) በፊት ብዙ የድር ባለሙያዎች
በ CSS መሸፈን
በድረ-ገጹ ላይ ለማተምን በጣም ቀላሉ ነገር ጽሑፍ ነው. ይህንን ለማድረግ የሚያስፈልግዎት አንድ የቅንብር ባህርይ ብቻ አለ ጽሑፍ-አመድ. የሲ ኤስ ኤስ ቅጥን ከዚህ በታች ይውሰዱ, ለምሳሌ:
p.center {text-align: center; }
በዚህ የሲኤስሲ መስመር ውስጥ ከመካከለኛው ክፍል የተጻፈ እያንዳንዱ አንቀጽ በወደቡ ውስጥ በአዕማድ መካከል ያተኮረ ይሆናል. ለምሳሌ, አንቀጹ ክፍፍል ውስጥ ካለ, ያ ትርጉሙ የልጁ ክፍል ነበር, በ
የዚህ ክፍል ምሳሌ በ HTML ሰነድ ውስጥ ተተግብሯል:
ይህ ጽሑፍ ማዕከላዊ ነው.
ከጽሑፍ አወጣጥ ባህሪ ጋር ማዕከሉን በሚሰነዝርበት ጊዜ, በውስጡ እንደ ማዕከለ ስዕሉ ውስጥ የተንጠለጠለ እና ሙሉ ገጹ ሙሉ በሙሉ ብቻ የሚያተኩር መሆኑን ያስታውሱ. እንዲሁም ማዕከላዊ-ጽሁፎች ለትልልቅ የይዘት ይዘቶችን ለማንበብ አስቸጋሪ ሊሆን እንደሚችል ያስታውሱ, ስለዚህ ይህን ቅጥ ቀላል በሆነ መልኩ ይጠቀሙ. ለርዕሰ አንቀፅ ወይም ለሌላ ይዘት የቴክስት ጽሑፍ እንደ ዋና ጽሁፍ ወይም ሌላ ጽሁፍ ያሉ ዋና ዋና ጽሁፎችን እና ጽሑፎችን በቀላሉ ለማንበብ ቀላል ሲሆን እንደ ዋናው ጽሁፍ ራሱ እንደ ዋናዎቹ ጽሁፎች ሁሉ ይዘቱ ሙሉ በሙሉ ማዕከል ከሆነ ተስተካክሏል. ያስታውሱ, ከድረ-ገፁ ጽሁፍ ጋር ሲነበብ ሁልጊዜ የሚነካ ቁልፍ ነው .
የ CSS ይዘት ማእከልን ማከፋፈል
ቁልፎች በገቢዎ ውስጥ የተሰየሙ ወርድዎችን እና እንደ ደረጃ ማሻሻያ አባልነት የተመሰረቱ አባላት ናቸው. አብዛኛውን ጊዜ እነዚህ ጥረቶች የሚፈጠሩት ኤች ቲ ኤም ኤል
div.center {
ኅዳግ: 0 መኪና;
ወርድ: 80 ኤም;
}
ይህ የሲ ኤስ ኤስ የሻጭ ቁምፊ የንብረት ባሕሪ ከላይ እና ከታች ጠርዝ ወደ 0 እሴት ያቀናጃል, ግራ እና ቀኝ ደግሞ «መኪና» ይጠቀማሉ. ይህ በመሠረቱ በየትኛው ቦታ የሚገኝን ማንኛውንም ቦታ ይይዛል እና በገጹ ላይ ያለውን አካል በማስተካከል በሁለቱ አካባቢያዊ እይታ መካከል ይታያል.
እዚህ በኤች.ቲ.ኤም.ኤል ተተግብሯል:
ነገር ግን በውስጡ ያለው ጽሁፍ ተሰርዟል.
የእርስዎ ማዕዘን ውሱን ስፋት ካለው, በውስጡ የያዘውን ክፍል ውስጥ እራሱን ያካትታል. በዚያ ጥቁር ውስጥ የተካተተ ጽሑፍ በውስጡ የሚገኝ አይደለም ነገር ግን ይጸድቃል. ይህ በድር አሳሾች ውስጥ ጽሑፍ በነባሪነት እንዲረጋገጥ ተደርጓል. ጽሁፉም እንደዚሁም ደግሞ ማዕከሉን ለመፈለግ ከፈለክ ከዚህ ክፍል ጋር ለማነፃፀር ቀደም ብሎ የተሸፈነው የጽሑፍ መስመሮችን መጠቀም እንችላለን.
ምስሎችን ከሲኤስኤስ ማማተር
አብዛኛዎቹ አሳሾች ተመሳሳይ የሆኑ የጽሑፍ ምህዳሮችን በመጠቀም ለአንቀጹ አስቀድመን እናሳያለን, ግን በ W3C እንደማይመክረው በዚህ ቴክኒኮን መተማመን ጥሩ አይደለም. እስካላወቀው ድረስ የአሳሾች የወደፊት ስሪቶች ይህን ዘዴ ችላ ለማለት ሊመርጡ የሚችሉበት እድል አለ.
የጽሑፍ-መሃል ወደ ማእከል ምስልን ከመጠቀም ይልቅ, ምስሉ ደረጃ-ኤለ ኤሎች አባል መሆኑን አሳሹን መንገር አለብዎት. በዚህ መንገድ እንደ ማንኛውም ሌላ ማእከል ማድረግ ይችላሉ. ይህ እንዲከሰት CSS ን እነሆ-
img.center {
ማሳያ: አግድ;
ኅዳግ-ግራ: ራስ;
ህዳግ-ቀኝ: ራስ;
}
እና እዚህ ለመምሰል የምንፈልገውን ኤችቲኤምኤል እዚህ ይመልከቱ:
እንዲሁም በመስመር-ውስጥ CSS (ከታች ይመልከቱ) መሣርያዎችን ማማከል ይችላሉ, ነገር ግን ይህ አቀራረብ በእርስዎ ኤችቲኤምኤል ማተሚያ ውስጥ የሚታዩ ቅጦችን ስለሚጨምር ይህ አቀራረብ አይመከርም. አስታውስ, ቅጥ እና አወቃቀር ለመለየት እንፈልጋለን, ስለዚህ የእኛን ኤች.ቲ.ኤም.ኤል. ኮድ በ ላይ ወደ <ኤች ቲ ኤም ኤል> መለያዎች በማካተት እና በሚቻልበት ጊዜ ሁሉ መወገድ አለበት.
ማዕከላት አውታር በ CSS
ማዕከለ ስዕሎችን አውጥቶ በድር ዲዛይነር ውስጥ ሁልጊዜ ፈታኝ ነው, ነገር ግን በ CSS3 ውስጥ የ CSS የተጣጣመ የማሳያ ሳጥን አቀማመጥ ሞዱል ሲለቀቅ አሁን ማድረግ የሚቻልበት መንገድ አለ.
አቀባዊ አሰላለፍ ከላይ ከተጠቀሰው አግድ አቀማመጥ ጋር ተመሳሳይ ነው. የሲ.ኤም.ኤልው ንብረቱ ከዋናው መካከለኛ ቀጥታ ጋር ነው.
.vcenter {
አቀባዊ-አሰላለፍ: መካከለኛ;
}
ለዚህ አቀራረብ የታችኛው አቀራረብ ሁሉም የ CSS አሳታፊዎችን ቢደግፉም, ብዙ እና ተጨማሪ ወደዚህ አዲስ የሲኤስኤስ የአቀማመጥ ዘዴ እየመጡ ይገኛሉ ማለት ነው! በእርግጥ, ሁሉም ዘመናዊ አሳሾች ዛሬ የሲሲቲ ቅጡን ይደግፋሉ. ይህ ማለት በ Flexbox ውስጥ ያሉዎት አሳሳቢ ጉዳዮች በጣም የቆየ የአሳሽ ስሪት ነው.
በድሮው አሳሽዎ ላይ ችግሮች ካጋጠሙ W3C የሚከተለውን ዘዴ በመጠቀም በቃ ሽፋኑን በጽሁፍ ማካተት እንዳለብዎት ይመክራሉ.
- ኤለመንቶችን እንደ መከፋፈያ ባለው አካል ውስጥ እንዲያተኩር ያስቀምጧቸው.
- በተያዘው አባል ላይ ዝቅተኛ ቁመት ያዘጋጁ.
- አባል እንደ የሠንጠረዥ ሕዋስ ያዝ.
- የቀጥታ አርማውን ወደ "መካከለኛ" ያቀናብሩ.
ለምሳሌ, CSS:
.vcenter {
min-height: 12em;
ማሳያ: ሠንጠረዥ-ሴል;
አቀባዊ-አሰላለፍ: መካከለኛ;
}
እና እዚህ HTML ነው:
ይህ ጽሑፍ በሳጥን ውስጥ ቀጥ ብሎ የተቀመጠ ነው.
የአቀማመጥ ማዕከል እና የቆዩ የ Internet Explorer versions
ኢንተርኔት ኤክስፕሎረር ወደ ኢሬክቲቭ (IE) ለማስመለስ የሚያስችሉ አንዳንድ መንገዶች አሉ, እና IE ብቻ ቅጦችን እንዲመለከት ሁኔታዎችን ተጠቅሞ ሁኔታዊ አስተያየቶችን ይጠቀሙ, ነገር ግን ትንሽ እና ግጥም እና አስቀያሚ ናቸው. የምስራቹ ዜና ለቆዩ የ IE ለውጦችን ለመጣል በ Microsoft የቅርብ ጊዜ ጣልቃ ገብነት, እነዚያ የማይደገፉ አሳሾች በአጭር ጊዜ ውስጥ መውጣት አለባቸው, የድር ንድፍ ባለሙያዎች እንደ CSS FlexBox ያሉ ዘመናዊ የአቀማመጥ አቀራረቦችን እንዲጠቀሙ ቀላል ያደርገዋል, ይህም ሁሉንም የሲ.ኤስ. CSS አቀማመጥ, ማዕከላዊ ብቻ ሳይሆን, ለሁሉም የድር ዲዛይነሮች ይበልጥ ይቀላቸዋል.