සීඑස්එස් මධ්‍ය පා text ය (තිරස් හා සිරස් අතට) ඩිවි බ්ලොක් එකක් තුළ

Question 1

මට ( සහ ) සඳහා divකට්ටලයක් ඇති අතර , ඇතුළත යම් පෙළක් ඇත.display:block90px heightwidth

පා the ය සිරස් අතට හා තිරස් අතට මධ්‍යයේ පෙළගැස්වීමට මට අවශ්‍යය.

මම උත්සාහ කර ඇත text-align:center, නමුත් එය තිරස් කොටස කරන්නේ නැත, එබැවින් මම උත්සාහ කළෙමි vertical-align:middle, නමුත් එය ක්‍රියාත්මක වූයේ නැත.

අදහස් තිබේද?

Question 2

එය පෙළ සහ / හෝ රූපයේ එක් පේළියක් නම් එය කිරීම පහසුය. භාවිතා කරන්න:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

ඒක තමයි. එය බහු රේඛා විය හැකි නම්, එය තරමක් සංකීර්ණ වේ. නමුත් http://pmob.co.uk/ හි විසඳුම් තිබේ . "සිරස් පෙලගැස්ම" සඳහා බලන්න.

ඒවා හක්ක හෝ සංකීර්ණ බෙදීම් එකතු කිරීමට නැඹුරු බැවින් ... මම සාමාන්‍යයෙන් තනි කොටුවක් සහිත මේසයක් භාවිතා කරමි ... එය හැකි තරම් සරල කිරීමට.

2020 සඳහා යාවත්කාලීන කිරීම:

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 වැනි පෙර බ්‍රව්සර්වල එය ක්‍රියාත්මක කිරීමට ඔබට අවශ්‍ය නොවන්නේ නම්, ඔබට ෆ්ලෙක්ස් බොක්ස් භාවිතා කළ හැකිය. වර්තමාන සියලුම ප්‍රධාන බ්‍රව්සර් මගින් එයට පුළුල් ලෙස සහාය ලැබේ . මූලික වශයෙන්, බහාලුම එහි ප්‍රධාන හා හරස් අක්ෂය දිගේ කේන්ද්‍රගත වීමත් සමඟ නම්‍යශීලී බහාලුමක් ලෙස නියම කළ යුතුය:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

"නම්‍ය අයිතමයක්" ලෙස හැඳින්වෙන දරුවා සඳහා ස්ථාවර පළලක් නියම කිරීම සඳහා:

#content {
  flex: 0 0 120px;
}

උදාහරණය: http://jsfiddle.net/2woqsef1/1/

අන්තර්ගතය හැකිලීමට-එතීමට, එය ඊටත් වඩා සරල ය: නම්‍ය අයිතමයෙන් flex: ...රේඛාව ඉවත් කරන්න , එය ස්වයංක්‍රීයව හැකිලෙන පරිදි ඔතා ඇත.

උදාහරණය: http://jsfiddle.net/2woqsef1/2/

ඉහත උදාහරණ එම්එස් එජ් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 ඇතුළු ප්‍රධාන බ්‍රව්සර්වල අත්හදා බලා ඇත.

ඔබට එය රිසිකරණය කිරීමට අවශ්‍ය නම් එක් තාක්ෂණික සටහනක්: නම්‍යශීලී අයිතමයේ ඇතුළත, මෙම නම්‍ය අයිතමය නම්යශීලී බහාලුමක් නොවන බැවින්, CSS හි පැරණි නම්යශීලී නොවන ක්‍රමය අපේක්ෂිත පරිදි ක්‍රියා කරයි. කෙසේ වෙතත්, ඔබ වත්මන් නම්යශීලී බහාලුමට අතිරේක නම්‍ය අයිතමයක් එකතු කළහොත්, නම්‍ය අයිතම දෙක තිරස් අතට තබනු ඇත. ඒවා සිරස් අතට තැබීමට flex-direction: column;නම්යශීලී බහාලුමට එකතු කරන්න . නම්‍යශීලී බහාලුමක් සහ එහි ආසන්න ළමා අංග අතර එය ක්‍රියා කරන්නේ එලෙසයි .

කේන්ද්‍රගත කිරීම සඳහා විකල්ප ක්‍රමයක් ඇත: centerනම්‍යශීලී බහාලුම සඳහා ප්‍රධාන හා හරස් අක්ෂයේ බෙදා හැරීම සඳහා නියම නොකොට, ඒ වෙනුවට margin: autoදිශාවන් හතරේම අමතර ඉඩ ප්‍රමාණයක් ලබා ගැනීම සඳහා නම්‍ය අයිතමය සහ ඒකාකාරව බෙදා හරින ලද ආන්තිකයන් සඳහන් කරන්න. නම්යශීලී අයිතමය සෑම දිශාවකටම කේන්ද්‍රගත කරයි. බහු නම්‍ය අයිතම ඇති විට හැර මෙය ක්‍රියාත්මක වේ. එසේම, මෙම තාක්ෂණය එම්එස් එජ් මත ක්‍රියාත්මක වන නමුත් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 හි නොවේ.

2016/2017 සඳහා යාවත්කාලීන කිරීම:

එය වඩාත් සුලභව කළ හැකි transformඅතර ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 වැනි පැරණි බ්‍රව්සර්වල පවා එය හොඳින් ක්‍රියාත්මක වේ. එයට පෙළ පෙළ කිහිපයක් සඳහා සහාය විය හැකිය:

position: relative;
top: 50%;
transform: translateY(-50%);

උදාහරණය: https://jsfiddle.net/wb8u02kL/1/

පළල හැකිලීමට-එතීමට:

ඉහත විසඳුම අන්තර්ගත ප්‍රදේශය සඳහා ස්ථාවර පළලක් භාවිතා කළේය. හැකිලෙන ඔතා ඇති පළලක් භාවිතා කිරීමට, භාවිතා කරන්න

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

උදාහරණය: https://jsfiddle.net/wb8u02kL/2/

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සඳහා සහය අවශ්‍ය නම්, නම්යශීලී කොටුව ක්‍රියා නොකරනු ඇති අතර ඉහත ක්‍රමය සහ line-heightක්‍රමය ක්‍රියාත්මක වේ. එසේ නොමැති නම්, ෆ්ලෙක්ස් බොක්ස් විසින් එම කාර්යය කරනු ඇත.

Question 3

2014 වන විට පොදු ශිල්පීය ක්‍රම:

ප්‍රවේශය 1 - transform translateX/ translateY:

උදාහරණය මෙතැන / සම්පූර්ණ තිර උදාහරණය

දී සහාය බ්රව්සර (ඔවුන් බොහෝ), ඔබ භාවිතා කළ හැකිය top: 50%/ left: 50%සංයෝජනය translateX(-50%) translateY(-50%)ගතිකව සිරස් අතට / තිරස් අතට එම මූලද්රව්යය මධ්යස්ථානය වෙත.
```
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

ප්‍රවේශය 2 - ෆ්ලෙක්ස්බොක්ස් ක්‍රමය:

උදාහරණය මෙතැන / සම්පූර්ණ තිර උදාහරණය

දී සහාය බ්රව්සර , නියම වූ displayඉලක්ක කර අංගයක් දක්වා flexහා භාවිතය align-items: centerසිරස්, මධ්යස්ථ හා justify-content: centerතිරස්, මධ්යස්ථ සඳහා. අතිරේක බ්‍රව්සර් සහාය සඳහා විකුණුම් උපසර්ග එකතු කිරීමට අමතක නොකරන්න ( උදාහරණය බලන්න ).
```
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

ප්‍රවේශය 3 - table-cell/ vertical-align: middle:

උදාහරණය මෙතැන / සම්පූර්ණ තිර උදාහරණය

සමහර අවස්ථාවලදී, html/ bodyමූලද්‍රව්‍යයේ උස සකසා ඇති බව සහතික කිරීමට ඔබට අවශ්‍ය වනු ඇත 100%.

සිරස් පෙලගැස්ම සඳහා, මව් මූලද්රව්යයේ width/ heightවෙත සකසා 100%එකතු කරන්න display: table. ළමා අංගය සඳහා, වෙත වෙනස් displayකර table-cellඑකතු කරන්න vertical-align: middle.

තිරස් කේන්ද්‍රගත කිරීම සඳහා, ඔබට text-align: centerපෙළ සහ වෙනත් inlineළමා අංග කේන්ද්‍රගත කළ හැකිය . විකල්පයක් ලෙස, ඔබට margin: 0 autoමූලද්‍රව්‍යය blockමට්ටම යැයි උපකල්පනය කළ හැකිය .
```
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
```

ප්‍රවේශය 4 - 50%විස්ථාපනය සමඟ ඉහළ සිට නියත වශයෙන්ම ස්ථානගත කර ඇත:

උදාහරණය මෙතැන / සම්පූර්ණ තිර උදාහරණය

මෙම ප්‍රවේශය පා text යට දන්නා උසක් ඇතැයි උපකල්පනය කරයි - මේ අවස්ථාවේ දී , 18px. 50%මව් මූලද්‍රව්‍යයට සාපේක්ෂව ඉහළ සිට මූලද්‍රව්‍යය නියත වශයෙන්ම ස්ථානගත කරන්න . margin-topමෙම අවස්ථාවේ දී, මූලද්‍රව්‍යයේ දන්නා උසින් අඩක් වන negative ණ අගයක් භාවිතා කරන්න - -9px.
```
html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
```

ප්‍රවේශය 5 - line-heightක්‍රමය (අවම නම්යශීලී - යෝජනා කර නැත):

උදාහරණය මෙතැන

සමහර අවස්ථාවලදී, මව් මූලද්රව්යයේ ස්ථාවර උස ඇත. සිරස් කේන්ද්‍රගත කිරීම සඳහා, ඔබ කළ යුත්තේ line-heightමව් මූලද්‍රව්‍යයේ ස්ථාවර උසට සමාන ළමා මූලද්‍රව්‍යයක් මත අගයක් සැකසීම පමණි .

- මේ විසඳුම සමහර අවස්ථාවල දී කටයුතු කරනු ඇත නමුත්, එය වටිනා පෙළ රේඛා කිහිපයක් ඇති විට එය වැඩ නොකරන බව පෙන්වා දෙමින් මේ වගේ .
```
.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}
```

4 සහ 5 ක්‍රම වඩාත් විශ්වාසදායක නොවේ. පළමු 3 න් එකක් සමඟ යන්න.

Question 4

නම්‍ය පෙට්ටිය / CSS භාවිතා කිරීම:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

සිට ගෙන සරලම ආකාරය මධ්යස්ථානය මූලිකාංග සිරස්ව හා තිරස්ව: ඉක්මන් ඉඟිය

Question 5

එම කොටස display: table-cell;සඳහා ඔබේ CSS අන්තර්ගතයට රේඛාව එක් කරන්න .

වගු සෛල පමණක් සහාය දක්වයි vertical-align: middle;, නමුත් ඔබට එම [වගු සෛල] අර්ථ දැක්වීම div ට ලබා දිය හැකිය ...

සජීවී උදාහරණයක් මෙහි ඇත: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Question 6

මේ සඳහා ඔබට ඉතා පහසු කේතයක් උත්සාහ කළ හැකිය:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

ස්නිපටය පුළුල් කරන්න

කෝඩපන් සබැඳිය: http://codepen.io/santoshkhalse/pen/xRmZwr

Question 7

මෙම CSS පන්තිය ඉලක්කගත <div> වෙත ලබා දෙන්න:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

ස්නිපටය පුළුල් කරන්න

Question 8

මම සෑම විටම බහාලුමක් සඳහා පහත සඳහන් CSS භාවිතා කරමි, එහි අන්තර්ගතය තිරස් හා සිරස් අතට කේන්ද්‍රගත කරන්න.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

එය ක්‍රියාවෙන් බලන්න: https://jsfiddle.net/yp1gusn7/

Question 9

ඔබට දෙමව්පියන්ගේflex දේපළ භාවිතා කළ හැකි අතර දේපල ළමයින්ගේ අයිතමවලට එකතු කළ හැකිය : divmargin:auto

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

ඔබට මෙහි තවත් විකල්ප දැකිය flexහැකිය: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 10

ප්‍රවේශය 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

ස්නිපටය පුළුල් කරන්න

ප්රවේශය 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

ස්නිපටය පුළුල් කරන්න

ප්‍රවේශය 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

ස්නිපටය පුළුල් කරන්න

Question 11

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

Question 12

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Question 13

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

ස්නිපටය පුළුල් කරන්න

Question 14

ජාලකය

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

කේත ස්නිපටය පෙන්වන්න

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

ස්නිපටය පුළුල් කරන්න

Question 15

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

ස්නිපටය පුළුල් කරන්න

Question 16

ඔබට පහත ක්‍රම අත්හදා බැලිය හැකිය:

ඔබට තනි වචනයක් හෝ එක් පේළියේ වාක්‍යයක් තිබේ නම්, පහත දැක්වෙන කේතයට උපක්‍රමය කළ හැකිය.

ඩිව් ටැග් එකක් තුළ පෙළක් තබා එයට හැඳුනුම්පතක් දෙන්න. එම හැඳුනුම්පත සඳහා පහත ගුණාංග නිර්වචනය කරන්න.
```
id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}
```
සටහන: රේඛීය උස දේපල කොට් of ාශයේ උස හා සමාන බව තහවුරු කරගන්න.

රූප

නමුත්, අන්තර්ගතය එක වචනයකට හෝ පේළියකට වඩා වැඩි නම් මෙය ක්‍රියා නොකරයි. එසේම, ඔබට px හෝ% හි බෙදීමක ප්‍රමාණය නියම කළ නොහැකි අවස්ථා තිබේ (බෙදීම සැබවින්ම කුඩා වන අතර අන්තර්ගතය හරියටම මැදට වන්නට ඔබට අවශ්‍ය නම්).
මෙම ගැටළුව විසඳීම සඳහා, අපට පහත ගුණාංග සංයෝජනය උත්සාහ කළ හැකිය.
```
id-name {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed red;
}
```
රූප

මෙම කේත පේළි 3 අන්තර්ගතය හරියටම කොට් of ාශයක් මධ්‍යයේ සකසයි (දර්ශනයේ ප්‍රමාණය නොසලකා). මෙම : "align-භාණ්ඩ මධ්යස්ථානයක්" අතර සිරස් කේන්ද්ර උපකාර ": මධ්යස්ථානය යුක්ති සහගත-අන්තර්ගතයට" එය තිරස් අතට කේන්ද්ර කර දෙනු ඇත.

සටහන: සියලුම බ්‍රව්සර්වල ෆ්ලෙක්ස් ක්‍රියා නොකරයි. අතිරේක බ්‍රව්සර් සහාය සඳහා සුදුසු විකුණුම් උපසර්ග එකතු කිරීමට වග බලා ගන්න.

Question 17

මෙය මට වැඩ කරයි (පරීක්ෂා කර ඇත හරි!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

ඔබට 50% ට වඩා වෙනත් අගයන් තෝරා ගත හැකිය. උදාහරණයක් ලෙස, දෙමව්පියන්ගෙන් 25% ක් කේන්ද්‍රගත වීමට 25% ක්.

Question 18

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Question 19

මට නම් මෙය හොඳම විසඳුමයි:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Question 20

2020 මාර්ගය

.parent{ 
  display: grid;
  place-items: center;
}

Question 21

සිරස් පෙලගැස්ම ලබා ගැනීම සඳහා රේඛාවේ උස සකස් කිරීම.

line-height: 90px;

Question 22

මෙය නිවැරදි පිළිතුර විය යුතුය. පිරිසිදු හා සරලම:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Question 23

ශෛලිය යොදන්න:

position: absolute;
top: 50%;
left: 0;
right: 0;

ඔබේ පෙළ දිග නොතකා කේන්ද්‍රගත වනු ඇත.

Question 24

මෙය මට ප්‍රයෝජනවත් විය:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Question 25

මව් කොට් .ාශයේ පහත කේතය එක් කරන්න

 display: grid;
 place-items: center;

Question 26

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html>

Question 27

මට වැඩ කරන ඇත්තෙන්ම සරල කේතයක්! එක් පේළියක් පමණක් වන අතර ඔබේ පෙළ තිරස් අතට කේන්ද්‍රගත වනු ඇත.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

ප්‍රතිදානය මේ වගේ ය:

පහසු විසඳුම් සෙවීම සඳහා යම් කාලයක් ගත කිරීමට නම් මෙම පිළිතුර ඡන්දය දෙන්න. ස්තූතියි! :)

Question 28

පහත උදාහරණය උත්සාහ කරන්න. මම එක් එක් කාණ්ඩය සඳහා උදාහරණ එකතු කර ඇත: තිරස් සහ සිරස්

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>

සීඑස්එස් මධ්‍ය පා text ය (තිරස් හා සිරස් අතට) ඩිවි බ්ලොක් එකක් තුළ

2020 සඳහා යාවත්කාලීන කිරීම:

2016/2017 සඳහා යාවත්කාලීන කිරීම:

පළල හැකිලීමට-එතීමට:

2014 වන විට පොදු ශිල්පීය ක්‍රම:

ප්‍රවේශය 1 - `transform` `translateX`/ `translateY`:

ප්‍රවේශය 2 - ෆ්ලෙක්ස්බොක්ස් ක්‍රමය:

ප්‍රවේශය 3 - `table-cell`/ `vertical-align: middle`:

ප්‍රවේශය 4 - `50%`විස්ථාපනය සමඟ ඉහළ සිට නියත වශයෙන්ම ස්ථානගත කර ඇත:

ප්‍රවේශය 5 - `line-height`ක්‍රමය (අවම නම්යශීලී - යෝජනා කර නැත):

ප්‍රවේශය 1

ප්රවේශය 2

ප්‍රවේශය 3

ජාලකය

සීඑස්එස් මධ්‍ය පා text ය (තිරස් හා සිරස් අතට) ඩිවි බ්ලොක් එකක් තුළ

2020 සඳහා යාවත්කාලීන කිරීම:

2016/2017 සඳහා යාවත්කාලීන කිරීම:

පළල හැකිලීමට-එතීමට:

2014 වන විට පොදු ශිල්පීය ක්‍රම:

ප්‍රවේශය 1 - transform translateX/ translateY:

ප්‍රවේශය 2 - ෆ්ලෙක්ස්බොක්ස් ක්‍රමය:

ප්‍රවේශය 3 - table-cell/ vertical-align: middle:

ප්‍රවේශය 4 - 50%විස්ථාපනය සමඟ ඉහළ සිට නියත වශයෙන්ම ස්ථානගත කර ඇත:

ප්‍රවේශය 5 - line-heightක්‍රමය (අවම නම්යශීලී - යෝජනා කර නැත):

ප්‍රවේශය 1

ප්රවේශය 2

ප්‍රවේශය 3

ජාලකය

ප්‍රවේශය 1 - `transform` `translateX`/ `translateY`:

ප්‍රවේශය 3 - `table-cell`/ `vertical-align: middle`:

ප්‍රවේශය 4 - `50%`විස්ථාපනය සමඟ ඉහළ සිට නියත වශයෙන්ම ස්ථානගත කර ඇත:

ප්‍රවේශය 5 - `line-height`ක්‍රමය (අවම නම්යශීලී - යෝජනා කර නැත):