CSS፡ አቀባዊ የጽሑፍ አሰላለፍ። ዲቪ እና ሌሎች የአቀማመጥ ረቂቅ ዘዴዎችን መሃል ማድረግ

በጣም ብዙ ጊዜ በአቀማመጥ ላይ አንዳንድ ንጥረ ነገሮችን በአግድም እና/ወይም በአቀባዊ መሃል ማድረግ ያስፈልጋል። ስለዚህ, ሁሉም ነገር በአንድ ቦታ ላይ እንዲገኝ ከተለያዩ ዘዴዎች ጋር አንድ ጽሑፍ ለማዘጋጀት ወሰንኩ.

አግድም አሰላለፍ

ህዳግ: አውቶማቲክ

የአግድም አሰላለፍ ከህዳግ ጋር ጥቅም ላይ የሚውለው የመሃል ክፍሉ ስፋት በሚታወቅበት ጊዜ ነው። ለአግድ አካላት ይሰራል፡-

ኤለም (ህዳግ-ግራ፡ ራስ፤ ህዳግ-ቀኝ፡ ራስ-ሰር፤ ስፋት፡ 50%፤)

የቀኝ እና የግራ ንጣፍ አውቶማቲክ ዋጋን መግለጽ እኩል ያደርጋቸዋል፣ ይህም በወላጅ እገዳ ውስጥ ያለውን ንጥረ ነገር በአግድም ያማክራል።

ጽሑፍ-አሰላለፍ: መሃል

ይህ ዘዴ በብሎክ ውስጥ ጽሑፍን መሃል ለማድረግ ተስማሚ ነው። ጽሑፍ-አሰላለፍ፡ መሃል፡

ከጽሑፍ ጋር አሰላለፍ

እኔ መሃል ላይ የተሰለፍኩ ነኝ

አቀማመጥ እና አሉታዊ ህዳግ ወደ ግራ

ለሚታወቀው ስፋት ማእከላዊ ብሎኮች ተስማሚ። የወላጅ እገዳን ወደ ቦታ እናስቀምጣለን-ከእሱ አቀማመጥ አንፃር ፣ መሃል ያለው አካል ወደ ቦታው: ፍጹም ፣ ግራ: 50% እና አሉታዊ ህዳግ-ግራ ፣ እሴቱ ከእቃው ግማሽ ስፋት ጋር እኩል ነው።

ከአቀማመጥ ጋር ማመጣጠን

እኔ መሃል ላይ የተሰለፍኩ ነኝ

ማሳያ፡ መስመር ውስጥ-ብሎክ + ጽሑፍ-አሰላለፍ፡ መሃል

ዘዴው የማይታወቅ ስፋት ያላቸውን ብሎኮች ለማስተካከል ተስማሚ ነው ፣ ግን የወላጅ መጠቅለያ ያስፈልገዋል። ለምሳሌ፣ አግድም ሜኑ መሀል ማድረግ የምትችለው በዚህ መንገድ ነው፡-

ከማሳያ ጋር አሰላለፍ፡ የመስመር ውስጥ-ብሎክ + ጽሑፍ-አሰላለፍ፡ መሃል;

አቀባዊ አሰላለፍ

የመስመር-ቁመት

ነጠላ የጽሑፍ መስመር ለማቀናጀት፣ ለወላጅ ብሎክ ተመሳሳይ የከፍታ እና የመስመር ክፍተት እሴቶችን መጠቀም ይችላሉ። ለአዝራሮች፣ የምናሌ ነገሮች፣ ወዘተ ተስማሚ።

የመስመር-ቁመት

እኔ በአቀባዊ የተሰለፍኩ ነኝ

አቀማመጥ እና አሉታዊ ህዳግ

አንድ ኤለመንት ቋሚ ቁመት በመስጠት እና ቦታን በመተግበር በአቀባዊ ሊደረደር ይችላል፡ ፍፁም እና አሉታዊ ህዳግ ከቁመቱ ግማሽ ቁመት ጋር እኩል ነው። የወላጅ እገዳው ቦታ ሊሰጠው ይገባል፡ ዘመድ፡

መጠቅለያ (አቀማመጥ፡ አንጻራዊ) ኤሌም (ቁመት፡ 200 ፒክስል፤ ህዳግ፡ -100 ፒክስል 0 0፤ አቀማመጥ፡ ፍፁም፤ ከፍተኛ፡ 50%)

ስለዚህ, አቀማመጥ እና አሉታዊ ህዳጎችን በመጠቀም, በገጹ ላይ ያለውን ኤለመንት መሃል ማድረግ ይችላሉ.

ማሳያ: ጠረጴዛ-ሴል

ለአቀባዊ አሰላለፍ፣ ማሳያው፡ የጠረጴዛ-ሴል ንብረቱ በንጥሉ ላይ ይተገበራል፣ ይህም የጠረጴዛ ሴል እንዲመስል ያደርገዋል። እንዲሁም ቁመቱን እና አቀባዊ-አሰላለፍ እናስቀምጣለን-መካከለኛ ወደ እሱ። ይህንን ሁሉ ከንብረቱ መበታተን ጋር በማጠራቀሚያ ውስጥ እንለብሳለን: ጠረጴዛ; :

አቀባዊ አሰላለፍ ማሳያ፡ ሠንጠረዥ-ሴል

እኔ በአቀባዊ የተሰለፍኩ ነኝ

አንድን አካል በተለዋዋጭ በገጽ ላይ አሰልፍ

CSS ን በመጠቀም ክፍሎችን በአንድ ገጽ ላይ የማጣመር መንገዶችን ተመልክተናል። አሁን የ jQuery አተገባበርን እንመልከት።

jQueryን ወደ ገጹ እንጨምር፡-

በገጹ ላይ ያለውን ኤለመንትን ለማሳለፍ ቀላል ተግባር እንዲጽፍ ሀሳብ አቀርባለሁ፣ alignCenter() ብለን እንጠራው። ኤለመንቱ ራሱ ለተግባሩ እንደ ሙግት ሆኖ ይሰራል፡-

የተግባር alignCenter(elem) (// እዚህ ኮድ)

በተግባሩ አካል ውስጥ የገጹን ማእከል መጋጠሚያዎች በተለዋዋጭ አስል እና ወደ ግራ እና ከፍተኛ የ CSS ንብረቶች ይመድቡ።

ተግባር alignCenter (elem) (elem.css (( ግራ: ($ (መስኮት)) ስፋት () - elem.ወርድ ()) / 2 + "px", ከላይ: ($ (መስኮት) . ቁመት () - elem. ቁመት ()) / 2 + "px" // ቦታ ማከልን አይርሱ: መጋጠሚያዎችን ለመቀስቀስ ወደ ኤለመንት ፍጹም)))

በተግባሩ የመጀመሪያ መስመር ላይ የሰነዱን ስፋት እናገኛለን እና ከእሱ ውስጥ የንጥሉን ስፋት እንቀንሳለን, በግማሽ ይከፈላል - ይህ የገጹ አግድም ማእከል ይሆናል. ሁለተኛው መስመር ተመሳሳይ ነው, በአቀባዊ ለመደርደር በከፍታ ብቻ.

ተግባሩ ዝግጁ ነው፣ በ DOM ዝግጁነት እና የመስኮት መጠን ለውጥ ክስተቶች ላይ ለመስቀል ይቀራል።

$(ተግባር() (// DOM ሲዘጋጅ የመሃል ስራውን ይደውሉ alignCenter($(elem)))// የመስኮቱ መጠን ሲቀየር ወደ ስራው ይደውሉ $(መስኮት)።መቀየር(ተግባር() (alignCenter($() elem));))) // ኤለመንት ማዕከል ተግባር ተግባር alignCenter(elem) (elem.css ((// ግራ እና ከፍተኛ መጋጠሚያዎች ግራ: ($(መስኮት)) .ስፋት () - elem.width ()) / 2 + "px", ከላይ: ($ (መስኮት). ቁመት () - elem. ቁመት ()) / 2 + "px" ))))))))

የFlexbox መተግበሪያ

እንደ Flexbox ያሉ አዲስ የ CSS3 ባህሪያት ቀስ በቀስ ወደ ዋናው ክፍል እየመጡ ነው። ቴክኖሎጂው ተንሳፋፊ፣ አቀማመጥ፣ ወዘተ ሳይጠቀም ማርክ ለመፍጠር ይረዳል። ኤለመንቶችን ወደ መሃል ለማስገባትም ሊያገለግል ይችላል። ለምሳሌ፣ ፍሌክስቦክስን በወላጅ .መጠቅለያ ክፍል ላይ እንተገብረው እና ይዘቱን ወደ ውስጥ እናስቀምጠው፡-

መጠቅለያ (ማሳያ፡ - ዌብኪት-ሣጥን፤ ማሳያ፡ -ሞዝ-ቦክስ፤ ማሳያ፡ -ms-flexbox፤ ማሳያ፡-ድርኪት-ተጣጣፊ፤ ማሳያ፡ ተጣጣፊ፤ ቁመት፡ 500 ፒክስል፤ ስፋት፡ 500 ፒክስል፤ ) .መጠቅለያ .ይዘት (ህዳግ፡- ራስ-ሰር፤ /* ህዳግ፡ 0 ራስ፤ አግድም ብቻ *//* ህዳግ፦ ራስ-0፤ አቀባዊ ብቻ */)

ሎሬም ኢፕሰም ዶሎር ሲት አሜት

ይህ ደንብ ኤለመንቱን በአግድም እና በአቀባዊ በአንድ ጊዜ ያተኩራል - ህዳግ አሁን በአግድም አቀማመጥ ላይ ብቻ ሳይሆን በአቀባዊ አቀማመጥም ይሠራል. እና የማይታወቅ ስፋት / ቁመት.

ተዛማጅ መርጃዎች

ፕሮጀክቱን ያግዙ

እኔ እንደማስበው ብዙዎቻችሁ የአቀማመጥ ስራን ያከናወናችሁ አካላትን በአቀባዊ ማመጣጠን እና አንድን ኤለመንትን ወደ መሃል ሲያቀናጁ ምን አይነት ችግሮች እንደሚፈጠሩ ታውቃላችሁ።

አዎን፣ በሲኤስኤስ ውስጥ ለአቀባዊ አሰላለፍ ብዙ እሴቶች ያሉት ልዩ ቋሚ-አሰላለፍ ንብረት አለ። ይሁን እንጂ በተግባር ግን እንደተጠበቀው አይሰራም. ይህንን ለማወቅ እንሞክር።

የሚከተሉትን አካሄዶች እናወዳድር። አሰላለፍ ከ፡

ጠረጴዛዎች,
ወደ ውስጥ መግባት፣
የመስመር ቁመት ፣
መዘርጋት፣
አሉታዊ ህዳግ,
መለወጥ ፣
የውሸት አካል
flexbox.

እንደ ምሳሌ፣ የሚከተለውን ምሳሌ ተመልከት።

ሁለት ዲቪ ኤለመንቶች አሉ፣ አንዱ በሌላው ውስጥ የተተከለ ነው። ተገቢውን ክፍሎች እንስጣቸው ውጫዊ እና ውስጣዊ .

ግቡ የውስጣዊውን አካል ወደ ውጫዊው አካል መሃል ማመጣጠን ነው.

ለመጀመር ፣ የውጪው እና የውስጠኛው ማገጃ መጠኖች ሲኖሩ ጉዳዩን ግምት ውስጥ ያስገቡ የሚታወቅ. ማሳያን እንጨምር፡ ውስጠ-መስመር ወደ ውስጠኛው ኤለመንት እና የፅሁፍ አሰላለፍ፡ መሃል እና ቀጥ ያለ አሰላለፍ፡ ከመካከለኛ ወደ ውጫዊ አካል።

ያስታውሱ አሰላለፍ የሚተገበረው የመስመር ውስጥ ወይም የውስጠ-ብሎክ ማሳያ ሁነታ ባላቸው አባሎች ላይ ብቻ ነው።

ድንበራቸውን ለማየት ለብሎኮች መጠኖቹን እና እንዲሁም የበስተጀርባ ቀለሞችን እናዘጋጅ።

ውጫዊ (ስፋት፡ 200 ፒክስል፤ ቁመት፡ 200 ፒክስል፤ ጽሑፍ-አሰላለፍ፡ መሃል፤ አቀባዊ-አሰላለፍ፡ መካከለኛ፤ የበስተጀርባ ቀለም፡ #ffc፤ ) : #fcc;)
ዘይቤዎችን ከተጠቀምን በኋላ ፣ የውስጠኛው እገዳ በአግድም ፣ ግን በአቀባዊ አለመሆኑን እናያለን-
http://jsfiddle.net/c1bgfffq/

ለምን ሆነ?እውነታው ግን አቀባዊ-አሰላለፍ ንብረቱ በአሰላለፍ ላይ ተጽዕኖ ያሳድራል ኤለመንቱ ራሱ እንጂ ይዘቱ አይደለም።(በጠረጴዛ ሴሎች ላይ ከተተገበረ በስተቀር). ስለዚህ, ይህንን ንብረት ወደ ውጫዊ አካል መጠቀሙ ምንም አላደረገም. በተጨማሪም ፣ ይህንን ንብረት ወደ ውስጠኛው አካል መጠቀሙ ምንም አያደርግም ፣ ምክንያቱም የመስመር ውስጥ-ብሎኮች ከአጎራባች ብሎኮች ጋር በአቀባዊ የተስተካከሉ ናቸው ፣ እና በእኛ ሁኔታ አንድ የመስመር ውስጥ-ብሎክ አለን።

ይህንን ችግር ለመፍታት በርካታ ዘዴዎች አሉ. እያንዳንዳቸውን ከዚህ በታች በዝርዝር እንመልከታቸው።

ከጠረጴዛ ጋር ማስተካከል

ወደ አእምሮ የሚመጣው የመጀመሪያው መፍትሔ የውጪውን እገዳ በአንድ-ሴል ጠረጴዛ መተካት ነው. በዚህ ሁኔታ, አሰላለፍ በሴሉ ይዘት ማለትም በውስጣዊ እገዳ ላይ ይተገበራል.

http://jsfiddle.net/c1bgfffq/1/

የዚህ መፍትሔ ግልጽ ጉዳት ከትርጉም እይታ አንጻር ጠረጴዛዎችን ለመደርደር መጠቀም ስህተት ነው. ሁለተኛው ጉዳቱ ጠረጴዛን ለመፍጠር በውጫዊ እገዳ ዙሪያ አንድ ተጨማሪ ንጥረ ነገር መጨመር ያስፈልግዎታል.

የመጀመርያው ተቀንሶ ሰንጠረዡን እና td tagsን በዲቪ በመተካት እና የጠረጴዛ ማሳያ ሁነታን በሲኤስኤስ ውስጥ በማዘጋጀት በከፊል ማስወገድ ይቻላል።

ውጫዊ መጠቅለያ (ማሳያ፡ ጠረጴዛ፡) .ውጫዊ (ማሳያ፡ ጠረጴዛ-ሴል)
የሆነ ሆኖ, የውጪው እገዳ አሁንም ሁሉንም መዘዞች ያለው ጠረጴዛ ይቀራል.

ከፓዲንግ ጋር ማመጣጠን

የውስጠኛው እና የውጨኛው ብሎክ ቁመታቸው የሚታወቅ ከሆነ አሰላለፍ የውስጠኛው ብሎክ ቀጥ ያለ ንጣፍ በመጠቀም ቀመርን በመጠቀም ማስተካከል ይቻላል፡(H outer -H inner)/2.

ውጫዊ (ቁመት፡ 200 ፒክስል፤)
http://jsfiddle.net/c1bgfffq/6/

የመፍትሄው ጉዳቱ የሁለቱም ብሎኮች ቁመቶች በሚታወቅበት ጊዜ በተወሰኑ ጉዳዮች ላይ ብቻ ተግባራዊ ይሆናል.

ከመስመር-ቁመት ጋር ማመጣጠን

የውስጠኛው እገዳ ከአንድ በላይ የጽሑፍ መስመር መያዝ እንደሌለበት ካወቁ የመስመር-ቁመት ንብረቱን መጠቀም እና ከውጪው እገዳ ቁመት ጋር እኩል ማድረግ ይችላሉ. የውስጠኛው ማገጃ ይዘቱ ወደ ሁለተኛው መስመር መጠቅለል የለበትም ስለሆነም ነጭ ቦታን ለመጨመር ይመከራል-ኑራፕ እና ከመጠን በላይ መፍሰስ: የተደበቁ ደንቦችም እንዲሁ.

ውጫዊ (ቁመት፡ 200 ፒክስል፤ የመስመር-ቁመት፡ 200 ፒክስል፤) .ውስጣዊ (ነጭ-ቦታ፡ ኖራፕ፤ የተትረፈረፈ፡ የተደበቀ)
http://jsfiddle.net/c1bgfffq/12/

የውስጠኛው ብሎክ የመስመር ቁመት እሴትን ከሻሩ እና ደንቦቹን ከጨመሩ ይህ ዘዴ መልቲ መስመር ጽሑፍን ለማስተካከል ሊያገለግል ይችላል ።

ውጫዊ (ቁመት: 200 ፒክስል; መስመር-ቁመት: 200 ፒክስል;) .ውስጣዊ (መስመር-ቁመት: መደበኛ; ማሳያ: የመስመር-ብሎክ; ቋሚ-አሰላለፍ: መካከለኛ;)
http://jsfiddle.net/c1bgfffq/15/

የዚህ ዘዴ ጉዳቱ የውጭ እገዳው ቁመት መታወቅ አለበት.

የዝርጋታ አሰላለፍ

ይህ ዘዴ የውጪው እገዳ ቁመት በማይታወቅበት ጊዜ ጥቅም ላይ ሊውል ይችላል, ነገር ግን የውስጣዊው ቁመት ይታወቃል.

ለዚህ ያስፈልግዎታል:

ወደ ውጫዊው እገዳ አንጻራዊ አቀማመጥ እና ፍጹም አቀማመጥ ወደ ውስጠኛው እገዳ;
ደንቦቹን ከላይ: 0 እና ታች ይጨምሩ: 0 ወደ ውስጠኛው እገዳ, በዚህም ምክንያት ወደ ውጫዊ እገዳው አጠቃላይ ቁመት ይዘረጋል;
የውስጠኛው ብሎክ አቀባዊ ንጣፍ እሴቱን በራስ-ሰር ያዘጋጁ።

.ውጫዊ (አቀማመጥ፡ አንጻራዊ፡) .ውስጣዊ (ቁመት፡ 100 ፒክስል፤ አቀማመጥ፡ ፍፁም፤ በላይ፡ 0፤ ታች፡ 0፤ ህዳግ፡ ራስ 0፤)
http://jsfiddle.net/c1bgfffq/4/

የዚህ ቴክኒካል ይዘት ለተዘረጋ እና ፍፁም ለተቀመጠው ብሎክ ቁመትን ማዘጋጀት አሳሹ እሴታቸው ወደ አውቶማቲክ ከተቀናበረ በእኩል መጠን ቀጥ ያለ ንጣፍ እንዲያሰላ ያደርገዋል።

ከአሉታዊ ህዳግ-ከላይ ጋር አሰላለፍ

ይህ ዘዴ በሰፊው የሚታወቅ ሲሆን ብዙ ጊዜ ጥቅም ላይ ይውላል. ልክ እንደ ቀዳሚው, የውጪው እገዳ ቁመት በማይታወቅበት ጊዜ ይተገበራል, ነገር ግን የውስጣዊው ቁመት ይታወቃል.

የውጪውን እገዳ ወደ አንጻራዊ አቀማመጥ, እና የውስጣዊው እገዳ ወደ ፍፁም አቀማመጥ ማዘጋጀት ያስፈልግዎታል. ከዚያም የውስጠኛውን ሳጥን ከውጨኛው ሳጥኑ የላይኛው ክፍል ግማሽ ቁመት ወደ ታች ማንቀሳቀስ ያስፈልግዎታል: 50% እና የራሱን ቁመት ግማሽ ወደ ላይ ከፍ ያድርጉት ህዳግ-ከላይ: -H inner / 2.

ውጫዊ (አቀማመጥ፡ አንጻራዊ፡) .ውስጣዊ (ቁመት፡ 100 ፒክስል፤ አቀማመጥ፡ ፍፁም፤ ላይ፡ 50%፤ ህዳግ-ከላይ፡ -50 ፒክስል)
http://jsfiddle.net/c1bgfffq/13/

የዚህ ዘዴ ጉዳቱ የቤት ውስጥ ክፍል ቁመት መታወቅ አለበት.

ከትራንስፎርሜሽን ጋር ማመጣጠን

ይህ ዘዴ ከቀዳሚው ጋር ተመሳሳይ ነው, ነገር ግን የውስጣዊ እገዳው ቁመት በማይታወቅበት ጊዜ ሊተገበር ይችላል. በዚህ አጋጣሚ በፒክሰሎች ውስጥ አሉታዊ ንጣፍ ከማዘጋጀት ይልቅ የትራንስፎርሜሽን ንብረቱን መጠቀም እና የትርጓሜ ተግባርን እና የ -50% እሴትን በመጠቀም የውስጥ ሳጥኑን ማንሳት ይችላሉ።

ውጫዊ (አቀማመጥ፡ አንጻራዊ፡) .ውስጣዊ (ቦታ፡ ፍፁም፡ በላይ፡ 50%፤ ትራንስፎርሜሽን፡ ተርጓሚ(-50%)፤)
http://jsfiddle.net/c1bgfffq/9/

በቀድሞው ዘዴ እሴቱን እንደ መቶኛ ማዘጋጀት ለምን አልተቻለም? የኅዳግ ንብረቱ መቶኛ ዋጋዎች ከወላጅ ኤለመንቱ ጋር ስለሚዛመዱ የ 50% እሴት ከውጨኛው ሳጥን ቁመት ግማሽ ጋር እኩል ይሆናል, እና የውስጠኛውን ሳጥን በእራሱ ቁመት በግማሽ ከፍ ማድረግ አለብን. የትራንስፎርሜሽን ንብረቱ በትክክል ለዚህ ነው።

የዚህ ዘዴ ጉዳቱ ውስጣዊ እገዳው ፍጹም አቀማመጥ ካለው ሊተገበር አይችልም.

ከFlexbox ጋር አሰላለፍ

በአቀባዊ ለመደርደር በጣም ዘመናዊው መንገድ Flexible Box አቀማመጥን (ታዋቂው ፍሌክስቦክስ በመባል ይታወቃል) መጠቀም ነው። ይህ ሞጁል በገጹ ላይ ያሉትን ንጥረ ነገሮች አቀማመጥ በተለዋዋጭ እንዲቆጣጠሩ ይፈቅድልዎታል ፣ ይህም በማንኛውም ቦታ ያስቀምጣቸዋል። የመሃል አሰላለፍ ለFlexbox በጣም ቀላል ስራ ነው።

የውጪው ብሎክ እንዲታይ መቀናበር ያስፈልጋል፡ ተጣጣፊ , እና የውስጠኛው እገዳ ወደ ህዳግ ማዘጋጀት ያስፈልጋል: ራስ . እና ሁሉም ነገር ነው! ቆንጆ ፣ አይደል?

ውጫዊ (ማሳያ፡ ተጣጣፊ፤ ስፋት፡ 200 ፒክስል፤ ቁመት፡ 200 ፒክስል፤)
http://jsfiddle.net/c1bgfffq/14/

የዚህ ዘዴ ጉዳቱ Flexbox የሚደገፈው በዘመናዊ አሳሾች ብቻ ነው።

የትኛውን መንገድ መምረጥ ነው?

ከችግሩ መግለጫ መቀጠል አስፈላጊ ነው-

ለጽሑፍ አቀባዊ አሰላለፍ ፣ ቀጥ ያለ ንጣፍ ወይም የመስመር-ቁመት ንብረቱን መጠቀም የተሻለ ነው።
የሚታወቅ ቁመት (እንደ አዶዎች ላሉ) ፍፁም አቀማመጥ ላላቸው አካላት፣ አሉታዊ የኅዳግ-ከላይ አቀራረብ ተስማሚ ነው።
የማገጃው ቁመት የማይታወቅ ለተጨማሪ ውስብስብ ጉዳዮች፣ የውሸት-ኤለመንት ወይም የለውጥ ንብረቱ ጥቅም ላይ መዋል አለበት።
ደህና፣ እድለኛ ከሆንክ የቆዩ የ IE ስሪቶችን መደገፍ የማያስፈልጋት ከሆነ፣ በእርግጥ ፍሌክስቦክስ የተሻለ ነው።

መለያዎች: መለያዎችን ያክሉ

በአጠቃላይ የኤችቲኤምኤል ኤለመንቶችን በአንድ ገጽ ላይ መሀል ማድረግ ከባድ ስራ አይደለም። በአንዳንድ ሁኔታዎች... የድር ገንቢዎች ምርጡን መፍትሄ ለማግኘት አእምሮአቸውን መጨናነቅ አለባቸው።

አካላትን በአግድም መሀል ማድረግ ያን ያህል ከባድ አይደለም፣በአቀባዊ አስቀድሞ ጥያቄዎችን ያስነሳል፣ነገር ግን በአጠቃላይ እነሱን ማጣመር ግራ የሚያጋባ ነው። ምላሽ በሚሰጥበት የንድፍ ዘመን, የአንዳንድ ንጥረ ነገሮች ትክክለኛ ልኬቶች እምብዛም አናውቅም. ኤለመንቶችን ከሲኤስኤስ ጋር ለማማከር 6 የተለያዩ መንገዶችን ቆጥሬያለሁ። በቀላል ምሳሌዎች እንጀምርና ውስብስብ በሆኑት እንጨርስ። በተመሳሳዩ HTML ኮድ ይሰራል፡-

አግድም መሃከል ከጽሁፍ ጋር አሰላለፍ

አንዳንድ ጊዜ ቀላሉ መፍትሔ በጣም ጥሩው ነው-

Div.center ( ጽሁፍ-አሰላለፍ፡ መሃል፤ ዳራ፡ hsl(0፣ 100%፣ 97%)፤ div.center img (ወርድ፡ 33%፤ ቁመት፡ ራስ፤)

እዚህ ምንም አቀባዊ ማእከል የለም፡ ለዚህም የኅዳግ-ከላይ እና የኅዳግ-ታች ንብረቱን በዲቪው ላይ መጨመር ያስፈልግዎታል።

ከህዳግ ጋር በመሃል ላይ፡ አውቶማቲክ

ለአግድም ማእከል ሌላ መፍትሄ:

Div.center (ዳራ፡ hsl(60፣ 100%፣ 97%)፣ div.center img (ማሳያ፡ እገዳ፡ ስፋት፡ 33%፤ ቁመት፡ ራስ፤ ህዳግ፡ 0 ራስ፤)

ለዚህ ዘዴ ማሳያውን ማዘጋጀት እንዳለቦት ልብ ይበሉ: ንብረትን አግድ.

ከጠረጴዛ-ሴል ጋር መሃከል

ማሳያን በመጠቀም፡ ሠንጠረዥ-ሴል ኤለመንቱ በአቀባዊ እና በአግድም መሃል መሆኑን ማረጋገጥ እንችላለን። ግን እዚህ ምስሉን በሌላ ዲቪ ኤለመንቱ ውስጥ መክተት ያስፈልገናል.

በመሃል የተስተካከለ (ማሳያ፡ ሠንጠረዥ፤ ዳራ፡ hsl(120፣ 100%፣ 97%)፣ ስፋት፡ 100%፤ ) .መሃል-ኮር img (ወርድ: 33%; ቁመት: ራስ;)

ሁሉም ነገር በትክክል እንዲሰራ, ዲቪው ወደ ስፋት ማዘጋጀት ያስፈልገዋል: 100%. ኤለመንቱን በአቀባዊ ለመሃል, ቁመቱን በማስተካከል መደበኛ ዘዴዎችን እንጠቀማለን. IE8+ን ጨምሮ በሁሉም ቦታ ይሰራል።

ፍፁም ማእከል ማድረግ

በጣም አስደሳች መፍትሔ. በውስጡም የውጭውን መያዣ ቁመት ማዘጋጀት ያስፈልግዎታል.

ፍፁም-የተስተካከለ (አቀማመጥ፡ አንጻራዊ፤ ደቂቃ-ቁመት፡ 500 ፒክስል፤ ዳራ፡ hsl(200፣ 100%፣ 97%) አውቶማቲክ፤ ኅዳግ፡ ራስ፤ ቦታ፡ ፍፁም፤ ከላይ፡ 0፤ ግራ፡ 0፤ ታች፡ 0፤ ቀኝ፡ 0፤)

ከትርጉም ጋር መሀል

የሲኤስኤስ ትራንስፎርሞች ጥቅም ላይ የሚውሉበት አዲስ መፍትሄ። ሁለቱንም አግድም እና ቀጥታ መሀል ያቀርባል፡-

መሃል (ዳራ፡ hsl (180፣ 100%፣ 97%)፤ አቀማመጥ፡ አንጻራዊ፡ ዝቅተኛ ቁመት፡ 500 ፒክስል፤) .መሃል img (አቀማመጥ፡ ፍፁም፤ ላይ፡ 50%፤ ግራ፡ 50%፤ ቀይር፡ መተርጎም (-50) %፣ -50%)፤ ስፋት፡ 30%፤ ቁመት፡ አውቶ

በርካታ አሉታዊ ጎኖች አሉ:

የ CSS ትራንስፎርሜሽን ንብረት የአሳሽ ቅድመ ቅጥያ ያስፈልገዋል
በቀድሞ የ IE (8 እና ከዚያ በታች) ስሪቶች አይሰራም
የውጭ መያዣው ከፍታ መሰጠት አለበት.
በመያዣው ውስጥ ጽሑፍ ካለ ፣ ከዚያ ትንሽ ደብዛዛ ሊሆን ይችላል።

በተለዋዋጭ ማሳያ እይታ መሃል ላይ

ምናልባት በጣም ቀላሉ አማራጭ.

መሃከል (ዳራ፡ hsl(240፣ 100%፣ 97%)፤ ማሳያ፡ flex፤ justify-content: center፤ አሰልፍ-ንጥሎች፡ መሃል፤

በሁሉም የ IE ስሪቶች ውስጥ አይሰራም (ምንም እንኳን ማሳያን በመጠቀም በአስተማማኝ ጎን ላይ ሊሆኑ ይችላሉ-የጠረጴዛ-ሴል በተጨማሪ)። ሙሉ CSS፡

መሃል (ዳራ፡ hsl (240፣ 100%፣ 97%)፤ ማሳያ፡ -webkit-box፤ /* Safari፣ iOS 6 እና ከዚያ በፊት፣ አንድሮይድ፣ የቆየ ዌብ ኪት */ ማሳያ፡ -ሞዝ-ቦክስ፣ /* Firefox (ግንቦት እና አልተሳካም) */ ማሳያ፡ -ms-flexbox፤ /* IE 10 */ ማሳያ፡ -webkit-flex፤/* Chrome 21+ */ ማሳያ፡ flex፤ /* Opera 12.1+፣ Firefox 22+ */ -webkit-box - አሰላለፍ፡ መሀል፤ -ሞዝ-ቦክስ-አሰላለፍ፡ መሀል፤ -ms-flex-align: center; -webkit-align-ites: center ቦክስ-ጥቅል፡ ማእከል፡ -ms-flex-pack፡ center; -webkit-justify-content: center; justify-content: center;)

ከካልሲ ጋር መሃከል

በአንዳንድ ሁኔታዎች ይህ ዘዴ flexboxን ከመጠቀም የበለጠ ሁለገብ ነው-

መሃል (ዳራ፡ hsl (300፣ 100%፣ 97%)፣ ደቂቃ-ቁመት፡ 600 ፒክስል፤ አቀማመጥ፡ አንጻራዊ፤ ) .መሃል img (ወርድ፡ 40%፤ ቁመት፡ ራስ፤ አቀማመጥ፡ ፍፁም፤ ከላይ፡ካልክ(50%) 20%)፤ ግራ፡ ካልሲ(50% - 20%)፤

በጣም ቀላል ነው, እንደ አጠቃላይ የገጽ አቀማመጥ ላይ በመመስረት የሚያስፈልጉንን ልኬቶች ማስላት እንችላለን. ስሌቶቹ በጣም ቀላል ናቸው, 50% የእቃው ማዕከላዊ ነጥብ ነው, ነገር ግን የእኛ ተግባር የምስሉን የላይኛው የግራ ጥግ በእነዚህ መጋጠሚያዎች ላይ ማስቀመጥ ነው. በመቀጠል የምስሉን ቁመት እና ስፋት ግማሹን ይቀንሱ. ቀመሩ፡-

ከፍተኛ: ካልሲ (50% - (40% / 2)); ግራ: ካልሲ (50% - (40% / 2));

በተግባር ፣ የንጥረ ነገሮችን መጠን ካወቅን ይህ ዘዴ በትክክል እንደሚሰራ ሊገነዘቡ ይችላሉ-

መሃል img (ስፋት፡ 500 ፒክስል፤ ቁመት፡ 500 ፒክስል፤ አቀማመጥ፡ ፍፁም፤ ከላይ፡ ካልክ (50% - (300 ፒክስል / 2)))፤ ግራ፡ ካልሲ(50% - (300 ፒክስል - 2));)

ይህ ዘዴ በፋየርፎክስ የተደገፈ ነው, ከስሪት 4 ጀምሮ, የአሳሽ ቅድመ ቅጥያዎችን መመዝገብ ያስፈልግዎታል. በ IE 8 ውስጥ አይሰራም. ሙሉ ኮድ፡

የመሃል img (ወርድ፡ 40%፤ ቁመት፡ ራስ፤ አቀማመጥ፡ ፍፁም፤ ከላይ፡ -webkit-calc(50% - 20%)፤ ግራ፡ -ዌብኪት-ካል (50% - 20%)፤ ከላይ፡ -moz-calc (50% - 20%)፤ ግራ፡ -ሞዝ-ካልክ(50% - 20%)፤ ከላይ፡ ካልሲ(50% - 20%)፤ ግራ፡ ካልሲ(50% - 20%);

ለራስዎ በጣም ጥሩውን መፍትሄ ለማግኘት እነዚህ ዘዴዎች በቂ እንደሆኑ ተስፋ አደርጋለሁ.

አንድ ገጽ ሲዘረጉ ብዙውን ጊዜ የመሃል አሰላለፍ በሲኤስኤስ መንገድ ማከናወን አስፈላጊ ነው-ለምሳሌ ፣ ዋናውን እገዳ መሃል። ይህንን ችግር ለመፍታት ብዙ አማራጮች አሉ, እያንዳንዱም ፈጥኖም ሆነ ዘግይቶ በማንኛውም የአቀማመጥ ንድፍ አውጪ ጥቅም ላይ መዋል አለበት.

የመሃል ጽሑፍ አሰላለፍ

ብዙውን ጊዜ, ለጌጣጌጥ ዓላማዎች, የጽሑፍ አሰላለፍ ወደ መሃከል ማዘጋጀት ይፈልጋሉ, በዚህ ጉዳይ ላይ CSS የአቀማመጥ ጊዜን እንዲቀንሱ ያስችልዎታል. ከዚህ ቀደም ይህ የሚደረገው የኤችቲኤምኤል ባህሪያትን በመጠቀም ነው፣ አሁን ግን መደበኛው የቅጥ ሉሆችን በመጠቀም ፅሁፍ እንዲስተካከል ይፈልጋል። ህዳጎችን መቀየር ከሚያስፈልጋቸው ብሎኮች በተለየ፣ በCSS ውስጥ፣ የፅሁፍ አሰላለፍ በነጠላ መስመር ያተኮረ ነው።

ጽሑፍ-አሰላለፍ: መሃል;

ይህ ንብረት ከወላጆች ወደ ሁሉም ልጆች የተወረሰ እና የሚተላለፍ ነው. ጽሑፉን ብቻ ሳይሆን ሌሎች አካላትንም ይነካል. ይህንን ለማድረግ በመስመር ውስጥ (ለምሳሌ እስፓን) ወይም ውስጠ-ብሎክ (ማሳያ ያለው ማንኛውም ብሎኮች፡ የንብረት ስብስብ) መሆን አለባቸው። የኋለኛው አማራጭ የንጥሉን ስፋት እና ቁመት እንዲቀይሩ ይፈቅድልዎታል, ይበልጥ በተለዋዋጭ ውስጠ-ገብዎችን ያስተካክሉ.

ብዙ ጊዜ በገጾች ላይ፣ አሰላለፍ ለራሱ መለያ ተሰጥቷል። W3C የአሰላለፍ ባህሪን ስለከለከለ ይህ ወዲያውኑ ኮዱን የተሳሳተ ያደርገዋል። በገጽ ላይ መጠቀም አይመከርም.

ብሎክን ወደ መሃል ማመጣጠን

ዲቪ መሃል ማድረግ ከፈለጉ፣ ሲኤስኤስ በጣም ምቹ መንገድ አለው፡ ህዳጎችን በመጠቀም። ገባዎች ለብሎግ ኤለመንቶች እና ለውስጠ-ብሎክ ኤለመንቶች ሊዘጋጁ ይችላሉ። የንብረቱ ዋጋ እሴቶቹን 0 (ቋሚ ገብ) እና አውቶማቲክ (አውቶማቲክ አግድም ገብ) መውሰድ አለበት፡-

ህዳግ፡0 አውቶማቲክ;

አሁን ይህ አማራጭ ፍጹም ትክክለኛ እንደሆነ ይታወቃል። ህዳጎችን መጠቀም የምስሉን አሰላለፍ ወደ መሃል እንዲያዘጋጁ ያስችልዎታል፡ በአንድ ገጽ ላይ ካለው ኤለመንቱ አቀማመጥ ጋር የተያያዙ ብዙ ችግሮችን ለመፍታት ያስችላል።

እገዳውን ወደ ግራ ወይም ቀኝ አሰልፍ

አንዳንድ ጊዜ በሲኤስኤስ መንገድ መሃል ማድረግ አያስፈልግም ፣ ግን ሁለት ብሎኮችን ጎን ለጎን ማስቀመጥ ያስፈልግዎታል-አንዱ በግራ ጠርዝ ፣ ሌላኛው በቀኝ። ይህንን ለማድረግ, ተንሳፋፊ ንብረት አለ, ከሶስት እሴቶች አንዱን ሊወስድ ይችላል-ግራ, ቀኝ ወይም ምንም. ጎን ለጎን መቀመጥ ያለባቸው ሁለት ብሎኮች አሉህ እንበል። ከዚያ ኮዱ እንደዚህ ይሆናል-

.ግራ (ተንሳፋፊ:ግራ;)
ቀኝ (ተንሳፋፊ: ቀኝ)

በመጀመሪያዎቹ ሁለት ብሎኮች (ለምሳሌ ፣ ግርጌ) ስር መቀመጥ ያለበት ሦስተኛው ብሎክ ካለ ፣ ከዚያ ግልጽ የሆነውን ንብረት ማዘጋጀት ያስፈልገዋል-

.ግራ (ተንሳፋፊ:ግራ;)
ቀኝ (ተንሳፋፊ: ቀኝ)
ግርጌ (ግልጽ: ሁለቱም)

እውነታው ግን ግራ እና ቀኝ ክፍል ያላቸው ብሎኮች ከአጠቃላይ ፍሰት ውስጥ ይወድቃሉ ፣ ማለትም ፣ ሁሉም ሌሎች አካላት የተጣጣሙ አካላትን መኖር ችላ ይላሉ። ግልጽ የሆነው፡ ሁለቱም ንብረቶች ግርጌው ወይም ሌላ ማንኛውም ብሎክ ከፍሰቱ የወደቁትን ንጥረ ነገሮች እንዲመለከቱ እና መጠቅለያውን (ተንሳፋፊውን) ወደ ግራ እና ቀኝ ያሰናክላል። ስለዚህ, በእኛ ምሳሌ, ግርጌው ወደ ታች ይንቀሳቀሳል.

አቀባዊ አሰላለፍ

የመሃል አሰላለፍን በሲኤስኤስ መንገዶች ማዘጋጀት በቂ ካልሆነ ፣ የልጁን እገዳዎች አቀባዊ አቀማመጥ መለወጥ ያስፈልግዎታል ። ማንኛውም የውስጠ-መስመር ወይም የውስጠ-ብሎክ ኤለመንት ወደ ላይ ወይም ታች መታጠፍ፣ በወላጅ አባል መካከል መሆን ወይም በማንኛውም ቦታ ላይ ሊሆን ይችላል። ብዙ ጊዜ፣ ብሎክ መሃል ላይ መሆን አለበት፣ ይህም የሚከናወነው ቀጥ ያለ-አሰላለፍ ባህሪን በመጠቀም ነው። ሁለት ብሎኮች አሉ እንበል ፣ አንዱ በሌላው ውስጥ ጎጆ። በዚህ ሁኔታ, የውስጠኛው እገዳ የውስጠ-መስመር አካል ነው (ማሳያ: የመስመር ውስጥ-ብሎክ). የልጁን እገዳ በአቀባዊ ማስተካከል ያስፈልግዎታል:

የላይኛው አሰላለፍ - .ልጅ (አቀባዊ-አሰላለፍ: ከላይ);
የመሃል አሰላለፍ - .ልጅ (አቀባዊ-አሰላለፍ: መካከለኛ);
የታችኛው አሰላለፍ - .ልጅ (አቀባዊ-አሰላለፍ: ከታች);

አግድ-ደረጃ አባሎች በጽሑፍ-አሰላለፍ ወይም በአቀባዊ-አሰላለፍ አይነኩም።

በተጣጣሙ ብሎኮች ሊሆኑ የሚችሉ ችግሮች

አንዳንድ ጊዜ ዲቪን በሲኤስኤስ መንገድ መሃል ማድረግ ትንሽ ችግር ይፈጥራል። ለምሳሌ ተንሳፋፊን ስንጠቀም፡- ሶስት ብሎኮች አሉ እንበል፡- አንደኛ፣ .ሁለተኛ እና .ሦስተኛ። ሁለተኛው እና ሦስተኛው ብሎኮች በመጀመሪያው ላይ ይተኛሉ. ክፍል ሰከንድ ያለው ኤለመንት በግራ የተስተካከለ ነው፣ እና የመጨረሻው እገዳ በቀኝ የተስተካከለ ነው። ከተሰለፉ በኋላ ሁለቱም ከጅረቱ ወደቁ። የወላጅ አካል ቁመት ከሌለው (ለምሳሌ ፣ 30em) ፣ ከዚያ በኋላ ወደ ልጅ ብሎኮች ቁመት አይዘረጋም። ይህንን ስህተት ለማስወገድ "ስፔሰር" - .ሁለተኛ እና .ሦስተኛ የሚያይ ልዩ ብሎክ ይጠቀማሉ. የሲኤስኤስ ኮድ፡-

.ሁለተኛ(ተንሳፋፊ፡ግራ)
.ሦስተኛ (ተንሳፋፊ: ቀኝ)
ግልጽ (ቁመት: 0; ግልጽ: ሁለቱም;)

የ: after pseudo-class ብዙ ጊዜ ጥቅም ላይ ይውላል፣ ይህ ደግሞ የውሸት ስፔሰር በመፍጠር ብሎኮችን ወደ ቦታው እንዲመልሱ ይፈቅድልዎታል (ለምሳሌ ፣ ከኮንቴይነር ክፍል ጋር ያለው ዲቪ ውስጥ .መጀመሪያ እና .ግራ እና ቀኝ ይይዛል)።

.ግራ(ተንሳፋፊ፡ግራ)
ቀኝ (ተንሳፋፊ: ቀኝ)
.container:በኋላ (ይዘት:""; ማሳያ: ጠረጴዛ; ግልጽ: ሁለቱም;)

ከላይ ያሉት አማራጮች በጣም የተለመዱ ናቸው, ምንም እንኳን በርካታ ልዩነቶች ቢኖሩም. በሙከራ አማካኝነት የውሸት ስፔሰር ለመፍጠር ሁል ጊዜ ቀላሉ እና በጣም ምቹ መንገድ ማግኘት ይችላሉ።

የአቀማመጥ ዲዛይነሮች ብዙ ጊዜ የሚያጋጥሟቸው ሌላው ችግር የውስጠ-አግድ አባሎችን ማስተካከል ነው። ከእያንዳንዳቸው በኋላ አንድ ቦታ በራስ-ሰር ይታከላል። ወደ አሉታዊ ህዳግ የተቀመጠው የኅዳግ ንብረት ይህንን ለመቋቋም ይረዳል. ብዙ ጊዜ ጥቅም ላይ የሚውሉ ሌሎች መንገዶችም አሉ፡- ለምሳሌ ዜሮ ማድረግ በዚህ አጋጣሚ የፊደል መጠን፡0 በወላጅ ኤለመንት ባህሪያት ውስጥ ተጽፏል። በብሎኮች ውስጥ ጽሑፍ ካለ ፣ የሚፈለገው የቅርጸ-ቁምፊ መጠን ቀድሞውኑ በውስጥ መስመር-ብሎክ አካላት ባህሪዎች ውስጥ ተመልሷል። ለምሳሌ፣ የቅርጸ-ቁምፊ መጠን፡1ኤም. ዘዴው ሁልጊዜ ምቹ አይደለም, ስለዚህ ከውጫዊ ውስጠቶች ጋር ያለው አማራጭ ብዙ ጊዜ ጥቅም ላይ ይውላል.

ብሎኮችን ማመጣጠን የሚያምሩ እና ተግባራዊ ገጾችን እንዲፈጥሩ ይፈቅድልዎታል-ይህ የአጠቃላይ አቀማመጥ አቀማመጥ ፣ በመስመር ላይ መደብሮች ውስጥ ያሉ ዕቃዎች መገኛ እና በንግድ ካርድ ጣቢያ ላይ ያሉ ፎቶዎች ናቸው።

ወደ ጣቢያው ገፆች መሃል አቀማመጥ እና አሰላለፍ ፈጠራ ጉዳይ ነው እና ብዙ ጊዜ ለጀማሪዎች ችግር ይፈጥራል። ስለዚህ እንዴት ማድረግ እንዳለብን እንይ. በሚከተለው መዋቅር ገጽ መስራት እንፈልጋለን እንበል፡-

ገጻችን አራት ብሎኮችን ያቀፈ ነው፡ አርእስት (ራስጌ)፣ ሜኑ (ምናሌ)፣ ይዘት (ይዘት) እና የጣቢያው ግርጌ (ግርጌ)። ገጹን መሃል ለማድረግ እነዚህን አራት ሳጥኖች በአንድ ዋና ሳጥን ውስጥ እናስቀምጣቸዋለን፡-

የጣቢያ ራስጌ

ይዘት

የጣቢያው ታች

በዚህ መዋቅር ምሳሌ ላይ, በርካታ አማራጮችን እንመለከታለን.

የጎማውን ቦታ አቀማመጥ እና ማእከል ማድረግ

የጎማ ቦታን በሚዘረጋበት ጊዜ ዋናው የመለኪያ አሃድ -% ነው, ምክንያቱም ጣቢያው በስፋት መዘርጋት እና ሁሉንም ነጻ ቦታ መያዝ አለበት.

ስለዚህ የ"ራስጌ" እና "እግር" ብሎኮች ስፋት ከማያ ገጹ ስፋት 100% ይሆናል። የ "ምናሌ" እገዳው ስፋት 30% መሆን አለበት, እና "ይዘት" እገዳው ከ "ምናሌ" ብሎክ አጠገብ መቀመጥ አለበት, ማለትም. ከ "ምናሌ" ማገጃው ስፋት ጋር እኩል የሆነ የግራ ህዳግ (ህዳግ-ግራ) ሊኖረው ይገባል፣ i.e. ሰላሳ%.

የ"ምናሌ" እና "ይዘት" ብሎኮች ጎን ለጎን እንዲሆኑ "ምናሌ" ብሎክ እንዲንሳፈፍ እና ወደ ግራ ጠርዝ እንገፋው። እንዲሁም ለብሎኮቻችን የጀርባ ቀለሞችን እናዘጋጃለን. አሁን ይህንን ሁሉ ወደ የቅጥ ሉህ እንፃፍ (በstyle.css ገጽ)

#ራስጌ(ዳራ፡#3e4982፤ ስፋት፡100%፤ ቁመት፡110 ፒክስል፤ ጽሑፍ-አሰላለፍ፡መሃል፤ ቀለም፡#FFFFFF፤ ቅርጸ-ቁምፊ መጠን፡24 ፒክስል፤ ፓዲንግ-ከላይ፡40 ፒክስል፤) #ሜኑ(ዳራ፡#6173cb፤ ተንሳፋፊ) : ግራ ፣ ስፋት: 30% ፣ ቁመት: 300 ፒክስል ፣ ጽሑፍ-አሰላለፍ ፣ መሃል ፤ ቀለም: # FFFFFF ፤ የቅርጸ-ቁምፊ መጠን: 18 ፒክስል ፤ ንጣፍ-ከላይ: 10 ፒክስል ፤ ) # ይዘት ( ዳራ: #ffffff ፤ ህዳግ - ግራ : 30% ቁመት: 300 ፒክስል; ጽሑፍ አሰላለፍ: መሃል; ) # ግርጌ (ዳራ: # 3e4982; ግልጽ: ሁለቱም; ስፋት: 100%; ቁመት: 50 ፒክስል; ጽሑፍ-አሰላለፍ: መሃል; ቀለም: # FFFFFF; የቅርጸ-ቁምፊ መጠን: 14 ፒክስል; ንጣፍ-ከላይ: 10 ፒክስል;)

ውጤቱ እንዲታይ የብሎኮች ቁመት በሁኔታዊ ሁኔታ ተቀምጧል። በአሳሽ ውስጥ ገጻችንን ይመልከቱ፡-

የአሳሹን መስኮት መጠን ከቀየሩ የሁሉም ብሎኮች ስፋት ይቀየራል። ይህ ሁልጊዜ ምቹ አይደለም, ምክንያቱም. የምናሌ ማገጃውን ሲዘረጋ ባዶ ቦታ ይታያል። ስለዚህ, ብዙውን ጊዜ የ "ምናሌ" እገዳው ስፋት ተስተካክሏል, እንደዚያ እናድርገው. ይህንን ለማድረግ በቅጥ ሉህ ውስጥ ያሉትን ተዛማጅ ንብረቶች እሴቶች ይተኩ-

... #ሜኑ( ዳራ፡#6173cb፤ ተንሳፋፊ፡ግራ፡ ስፋት፡200 ፒክስል፤ ቁመት፡300 ፒክስል፤)

አሁን ገጻችን በተፈጥሮው ተዘርግቷል. በፈሳሽ አቀማመጥ, ገፆች የስክሪኑን አጠቃላይ ስፋት ይይዛሉ, ስለዚህ የገጽ ማእከል አያስፈልግም.

ነገር ግን ከፈለጉ፣ ገጽዎን በማያ ገጹ ግራ እና ቀኝ ላይ እኩል ገባዎች እንዲኖሩት ማድረግ ይችላሉ። ይህንን ለማድረግ ለሌሎቹ ብሎኮች ሁሉ መያዣ በሆነው “ዋና” ብሎክ ላይ ዘይቤን ማከል ያስፈልግዎታል ።

አሁን ገጻችን ይህን ይመስላል።

የጣቢያ አቀማመጥ እና መሃል, ቋሚ ስፋት

በዚህ ሁኔታ ፣ የእኛን ብሎኮች ቋሚ መጠኖችን ማዘጋጀት አለብን-

#ዋና(ወርድ፡800ፒክስል፤) #ራስጌ(ዳራ፡#3e4982፤ ስፋት፡800ፒክስል፤ ቁመት፡150ፒክስል፤ጽሑፍ-አሰላለፍ፡መሃል፤ ቀለም፡#FFFFFF፤የቅርጸ-ቁምፊ መጠን፡24px፤ padding-top:40px;) #ምናሌ ( ዳራ: # 6173cb; ተንሳፋፊ: ግራ; ስፋት: 200 ፒክስል; ቁመት: 300 ፒክስል; ጽሑፍ-አሰላለፍ: መሃል; ቀለም: # FFFFFF; የቅርጸ-ቁምፊ መጠን: 18 ፒክስል; ንጣፍ-ከላይ: 10 ፒክስል; ) # ይዘት ( ዳራ: #ffffff; ህዳግ-ግራ፡ 200 ፒክስል፤ ቁመት፡ 300 ፒክስል፤ ጽሑፍ-አሰላለፍ፡ መሃል፤ ) #ግርጌ(ዳራ፡#3e4982፤ ግልጽ፡ ሁለቱም፤ ስፋት፡800ፒክስል፤ ቁመት፡50 ፒክስል፤ ጽሑፍ-አሰላለፍ፡መሃል፤ ቀለም፡#FFFFFF፤ ቅርጸ-ቁምፊ- መጠን: 14 ፒክስል; ንጣፍ-ከላይ: 10 ፒክስል;)

አሁን ገጻችን በማያ ገጹ ግራ ጠርዝ ላይ ተያይዟል.

በዚህ ሁኔታ, ከጣቢያው ገፆች መሃል ጋር መደርደር እንደሚከተለው ሊከናወን ይችላል. ገጻችን "ሰውነት" የሚል መለያ እንዳለው አስታውስ ይህም ስፋት እና የተወሰነ ንጣፍ ሊሰጥ ይችላል።

ይህንን እናድርገው፡ የ"አካል" መለያውን ስፋት ወደ 800 ፒክሰሎች (እንደ "ዋና" ብሎክ) እና የግራ ገብ (ፓዲንግ-ግራ) ወደ 50% ያቀናብሩ። ከዚያ የ“ዋና” ብሎክ አጠቃላይ ይዘቶች በማያ ገጹ በቀኝ በኩል (ማለትም ከመሃል ወደ ቀኝ) ይታያሉ።

የእኛ "ዋና" ብሎክ በስክሪኑ መሃል ላይ እንዲገኝ፣ መሃሉ ከ"አካል" መለያ ጋር መመሳሰል አለበት። እነዚያ። "ዋናው" ብሎክን በግማሽ መጠን ወደ ግራ ያንቀሳቅሱት. የ "ዋና" ብሎክ ስፋት 800 ፒክሰሎች ነው, ስለዚህ ንብረቱን "ህዳግ-በግራ: -400 ፒክስል" ማዘጋጀት ያስፈልግዎታል. አዎ፣ ይህ ንብረት አሉታዊ እሴቶችን ሊወስድ ይችላል፣ በዚህ ጊዜ የግራ ህዳግ ይቀንሳል (ማለትም ወደ ግራ ዞሯል)። እኛ የምንፈልገውም ያ ነው።

አሁን የቅጥ ሉህ ይህን ይመስላል።

አካል (ወርድ: 800 ፒክስል; ፓዲንግ-ግራ: 50%;) # ዋና (ወርድ: 800 ፒክስል; ህዳግ-ግራ: - 400 ፒክስል; ) # ራስጌ (ዳራ: # 3e4982; ስፋት: 800 ፒክስል; ቁመት: 150 ፒክስል; ጽሑፍ - አሰላለፍ: መሃከል ቀለም፡#FFFFFF፤የቅርጸ-ቁምፊ መጠን፡24 ፒክስል፤ፓዲንግ-ከላይ፡40ፒክስል፤) #ሜኑ(ዳራ፡#6173cb፤ ተንሳፋፊ፡ግራ፡ ስፋት፡200 ፒክስል፤ ቁመት፡300 ፒክስል፤ ጽሑፍ-አሰላለፍ፡መሃል፤ ቀለም፡#FFFFFF; የቅርጸ-ቁምፊ መጠን: 18 ፒክስል; ንጣፍ-ከላይ: 10 ፒክስል; ) # ይዘት (ዳራ: #ffffff; ህዳግ-ግራ: 200 ፒክስል; ቁመት: 300 ፒክስል ፤ ጽሑፍ - አሰላለፍ: መሃል ፤ ) # ግርጌ ( ዳራ: # 3e4982 ፤ ግልጽ: ሁለቱም; ስፋት፡800 ፒክስል፤ ቁመት፡50 ፒክስል፤ ጽሑፍ-አሰላለፍ፡መሃል፤ ቀለም፡#FFFFFF፤ ቅርጸ-ቁምፊ መጠን፡14 ፒክስል፤ ንጣፍ-ከላይ፡10 ፒክስል፤)

እና በአሳሹ ውስጥ ያለው ገጻችን በትክክል መሃል ላይ ይገኛል-

የገጹን ገፆች ማዕከል ለማድረግ ሁለት አማራጮችን ተመልክተናል, በእውነቱ, እነሱ ቀኖና አይደሉም. ሙከራ ማድረግ እና የራስዎን ስሪት ይዘው መምጣት ይችላሉ, ስራውን በተለያዩ አሳሾች ውስጥ ብቻ ያረጋግጡ. እንደ አለመታደል ሆኖ በፋየርፎክስ ወይም ኦፔራ ውስጥ በደንብ የሚታየው ነገር በ IE እና በተቃራኒው ሙሉ በሙሉ ለመረዳት የማይቻል ሊሆን ይችላል። እና ይሄ መታወስ አለበት.

በፈጠራ ስራዎችዎ ውስጥ መልካም ዕድል!