කොට් div ාශයක පෙළ සිරස් අතට පෙළගස්වන්නේ කෙසේද?

පෙළ සමඟ පෙළ පෙළගැස්වීම සඳහා වඩාත් way ලදායී ක්‍රමය සොයා ගැනීමට මම උත්සාහ කරමි. මම කරුණු කිහිපයක් උත්සාහ කර ඇති අතර කිසිවක් ක්‍රියාත්මක නොවන බව පෙනේ.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS හි සිරස් කේන්ද්‍රගත කිරීම
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

ලිපි සාරාංශය:

CSS 2 බ්‍රව්සරයක් සඳහා යමෙකුට අන්තර්ගතය කේන්ද්‍රගත කිරීමට display:table/ භාවිතා display:table-cellකිරීමට හැකිය .

JSFiddle හි නියැදියක් ද ඇත :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

පැරණි බ්‍රව්සර් සඳහා හෙක්ස් (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6/7) #නව බ්‍රව්සර් වලින් මෝස්තර සැඟවීමට භාවිතා කරමින් මෝස්තර වලට ඒකාබද්ධ කළ හැකිය :

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

ඔබට line-heightගුණාංගය එක් කළ යුතු අතර එම ගුණාංගය උසෙහි උසට අනුරූප විය යුතුය div. ඔබේ නඩුවේ:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

ඇත්ත වශයෙන්ම, ඔබට බොහෝ විට එම heightගුණාංගය ඉවත් කළ හැකිය .

මෙය ක්‍රියාත්මක වන්නේ එක් පෙළ පේළියක් සඳහා පමණක් බැවින් ප්‍රවේශම් වන්න.

මෙන්න විශිෂ්ට සම්පතක්

Http://howtocenterincss.com/ වෙතින් :

CSS හි කේන්ද්‍රගත වීම බූරුවාගේ වේදනාවකි. විවිධ සාධක මත පදනම්ව එය කිරීමට ගැසිලියන් ක්‍රම ඇති බව පෙනේ. මෙය ඔවුන්ව ශක්තිමත් කරන අතර සෑම තත්වයක් සඳහාම ඔබට අවශ්‍ය කේතය ලබා දෙයි.

Flexbox භාවිතා කිරීම

නවීන තාක්‍ෂණය සමඟ මෙම ලිපිය යාවත්කාලීනව තබා ගැනීමට පෙළඹෙන්න, ෆ්ලෙක්ස්බොක්ස් භාවිතයෙන් යමක් කේන්ද්‍රගත කිරීමට වඩා පහසු ක්‍රමයක් මෙන්න. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 සහ ඊට පහළින් ෆ්ලෙක්ස්බොක්ස් සහාය නොදක්වයි .

මෙන්න විශිෂ්ට සම්පත් කිහිපයක්:

• Flexbox වෙත මාර්ගෝපදේශයක්
• Flexbox සමඟ මූලද්රව්ය කේන්ද්රගත කිරීම
• ෆ්ලෙක්ස් බොක්ස් සඳහා ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සින්ටැක්ස්
• Flexbox සඳහා සහාය

බ්‍රව්සර් උපසර්ග සමඟ JSFiddle

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

තවත් විසඳුමක්

මෙය zerosixthree වෙතින් වන අතර CSS පේළි හයක් සමඟ ඕනෑම දෙයක් කේන්ද්‍රගත කිරීමට ඔබට ඉඩ සලසයි

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 සහ ඊට පහළින් මෙම ක්‍රමයට සහය නොදක්වයි .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

පෙර පිළිතුර

සලකුණු කරන ලද පිළිතුරේ සබැඳි තරමක් යල් පැන ගිය බැවින් ප්‍රයෝජනවත් සරල හා හරස් බ්‍රව්සර් ප්‍රවේශයකි.

ජාවාස්ක්‍රිප්ට් හෝ සීඑස්එස් රේඛා උසකට යොමු නොවී, අනුපිළිවෙලට නැති ලැයිස්තුවක සහ බෙදීම් දෙකෙහිම සිරස් සහ තිරස් ලෙස පෙළ පෙළ කරන්නේ කෙසේද . ඔබ සතුව කොපමණ පෙළ තිබුණත් ඔබට විශේෂිත ලැයිස්තු හෝ බෙදීම් සඳහා විශේෂ පන්ති යෙදිය යුතු නොවේ (කේතය එක් එක් සඳහා සමාන වේ). ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6, ෆයර්ෆොක්ස්, ක්‍රෝම්, ඔපෙරා සහ සෆාරි ඇතුළු සියලුම ප්‍රධාන බ්‍රව්සර් වල මෙය ක්‍රියාත්මක වේ . නවීන බ්‍රව්සර් සතුව නොමැති ඔවුන්ගේ CSS සීමාවන් නිසා ඔවුන්ට උපකාර කිරීම සඳහා විශේෂ ස්ටයිල් ෂීට් දෙකක් (එකක් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 සඳහා සහ තවත් එකක් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සඳහා) ඇත.

ඇන්ඩි හොවාර්ඩ් - අනුපිළිවෙලට නැති ලැයිස්තුවක සිරස් අතට හා තිරස් අතට කේන්ද්‍රගත කරන්නේ කෙසේද?

මා වැඩ කළ අවසන් ව්‍යාපෘතිය සඳහා ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7/6 ගැන එතරම් තැකීමක් නොකළ නිසා, මම තරමක් ඉවත් කළ අනුවාදයක් භාවිතා කළෙමි (එනම් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 සහ 6 හි වැඩ කිරීමට හේතු වූ දේවල් ඉවත් කර ඇත). එය වෙනත් කෙනෙකුට ප්‍රයෝජනවත් විය හැකිය ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

එය සමඟ පහසුය display: flex. පහත දැක්වෙන ක්‍රමය සමඟ, divකැමැත්තෙහි පෙළ සිරස් අතට කේන්ද්‍රගත වනු ඇත:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

ඔබට අවශ්‍ය නම් තිරස්:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

ඔබට අවශ්‍ය බ්‍රව්සර් අනුවාදය දැකිය යුතුය; පැරණි අනුවාද වල කේතය ක්‍රියා නොකරයි.

අහඹු මූලද්‍රව්‍ය පහසුවෙන් සිරස් අතට කේන්ද්‍රගත කිරීමට මම පහත සඳහන් දෑ භාවිතා කරමි:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

මෙය මගේ පිටපත div200px උස පිටත සිරස් මැදට කේන්ද්‍රගත කරයි div. -webkit-ඔබගේ බ්‍රව්සරය සඳහා මෙම කාර්යය කිරීමට ඔබට බ්‍රව්සර් උපසර්ගයක් ( මගේ නඩුවේදී මෙන්) භාවිතා කිරීමට අවශ්‍ය විය හැකි බව සලකන්න .

මෙය පෙළ සඳහා පමණක් නොව අනෙකුත් අංග සඳහාද ක්‍රියා කරයි.

දර්ශනය 'වගු කොටුවට' සැකසීමෙන් සහ මෙය යෙදීමෙන් ඔබට මෙය කළ හැකිය vertical-align: middle;:

    {
        display: table-cell;
        vertical-align: middle;
    }

කෙසේ වෙතත්, මම අවසරයකින් තොරව http://www.w3schools.com/cssref/pr_class_display.asp වෙතින් පිටපත් කළ මෙම උපුටනයට අනුව ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි සියලුම අනුවාදයන් මෙයට සහාය නොදක්වයි .

සටහන: "පේළිගත කිරීමේ වගුව", "වගුව", "වගු-ශීර්ෂ පා" "," වගු කොටුව "," වගු-තීරුව "," වගු-තීරු-කණ්ඩායම "," වගු-පේළිය "," වගු-පේළිය " -group ", සහ" උරුමය "සඳහා Internet Explorer 7 සහ ඊට පෙර සහාය නොදක්වයි. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 ට! ඩොක්ටයිප් අවශ්‍යයි. Internet Explorer 9 අගයන්ට සහය දක්වයි.

පහත වගුවේ http://www.w3schools.com/cssref/pr_class_display.asp වෙතින් අවසර ලත් ප්‍රදර්ශන අගයන් පෙන්වයි .

මෙය උත්සාහ කරන්න, දෙමාපිය කොටස එකතු කරන්න:

display: flex;
align-items: center;

මේ දිනවල (අපට තවත් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6-7-8 අවශ්‍ය නොවේ) මම display: tableමෙම ගැටළුව සඳහා CSS භාවිතා කරමි (හෝ display: flex).

පැරණි බ්‍රව්සර් සඳහා:

වගුව:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

නම්‍යතාවය:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

මෙය (ඇත්ත වශයෙන්ම) මෙම ගැටළුව සඳහා මගේ ප්‍රියතම විසඳුමයි (සරල හා ඉතා හොඳින් බ්‍රව්සරයට සහය දක්වයි):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

තනි පෙළක් සඳහා වඩාත් සුදුසු විසඳුමක් මෙන්න.

පේළි ගණන දන්නේ නම්, එය යම් යම් කරකැවීම් සමඟ බහු-පෙළ පෙළ සඳහා වැඩ කළ හැකිය.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

මෙන්න JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

ඔබට ෆ්ලෙක්ස්බොක්ස් භාවිතයෙන් කේන්ද්‍රීය පෙළ සිරස් අතට බෙදිය හැකිය.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

ෆ්ලෙක්ස් බොක්ස් වෙත සම්පූර්ණ මාර්ගෝපදේශයකින් ඔබට ඒ ගැන වැඩි විස්තර දැනගත හැකිය .

මෙම සරල විසඳුම පරීක්ෂා කරන්න:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

ෆ්ලෙක්ස්බොක්ස් මා වෙනුවෙන් පරිපූර්ණව ක්‍රියා කළ අතර, මව් කොට් div ාශයේ විවිධ අංග තිරස් අතට හා සිරස් අතට කේන්ද්‍රගත කළේය.

HTML කේතය:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS- කේතය:
පහත කේතය මඟින් මව්-බෙදීම් ඇතුළත ඇති සියලුම අංග තීරුවක සිරස් අතට සිරස් අතට කේන්ද්‍රගත කරයි. ඇන්කර් මූලද්‍රව්‍ය දෙක එකම පේළියක (පේළියේ) තබා ගැනීමට මම ළමා-ඩිව් භාවිතා කළෙමි. ළමා බෙදීම් නොමැතිව මූලද්‍රව්‍ය තුනම (ඇන්කර්, ඇන්කර් සහ ඡේදය) දෙමාපිය-ඩීව් තීරුව තුළ එකිනෙකට ඉහළින් සිරස්ව ඇත. මෙහිදී දෙමව්පියන්-කොට් තීරුව තුළ ළමා-ඩිව් පමණක් ගොඩගැසී ඇත.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

වගු / වගු කොටුවට යොමු නොවී අන්තර්ගතය සිරස් අතට පෙළගැස්වීමට සරල ක්‍රමයක් තිබේ:

http://jsfiddle.net/bBW5w/1/

එහි මම කන්ටේනරයේ සම්පූර්ණ උස උපකල්පනය කරන අදෘශ්‍යමාන (පළල = 0) බෙදීමක් එකතු කර ඇත්තෙමි.

එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සහ ෆයර්ෆොක්ස් (නවතම අනුවාද) වල වැඩ කරන බව පෙනේ. මම වෙනත් බ්‍රව්සර් සමඟ පරීක්ෂා කළේ නැත

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

ඇත්ත වශයෙන්ම CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

මෙය මා විසින් සොයාගත් පිරිසිදුම විසඳුමයි (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9+) සහ transform-styleවෙනත් පිළිතුරු අතහැර දමා ඇති "පික්සල් .5 පික්සෙල්" නිකුතුව සඳහා විසඳුමක් එක් කරයි .

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

මූලාශ්‍රය: සිරස් CSS පේළි 3 ක් සමඟ ඕනෑම දෙයක් පෙළගස්වන්න

සාරධර්ම නොදැනීමේ මූලද්‍රව්‍යයකට සරල විසඳුමක්:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

ආදම් Tomat පිළිතුර අනුව එහි සූදානම් JSFiddle උදාහරණයක් , පෙළ සන්ධානගත වීම div :

<div class="cells-block">    
    text<br/>in the block   
</div>

දර්ශනය භාවිතා කිරීමෙන් : CSS හි නම්‍යශීලී :

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

තවත් උදාහරණයක් සහ බ්ලොග් සටහනක පැහැදිලි කිරීම් කිහිපයක් සමඟ .

ජාලක අයිතමයක් මත ස්වයංක්‍රීයව ආන්තික කරන්න.

ෆ්ලෙක්ස්බොක්ස් වලට සමානව, ජාලක අයිතමයක් මත ආන්තික ස්වයංක්‍රීයව යෙදීම අක්ෂ දෙකෙහිම කේන්ද්‍රගත කරයි:

.container {
  display: grid;
}
.element {
  margin: auto;
}

භාවිත:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

මෙම උපක්‍රමය සමඟ, ඔබට එය කේන්ද්‍රගත කිරීමට අවශ්‍ය නැතිනම් ඕනෑම දෙයක් පෙළගස්වා "වමේ: 0" වමට පෙළගස්වන්න.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

නම්‍යතාවය භාවිතා කරමින්, බ්‍රව්සර් විදැහුම්කරණයේ වෙනස්කම් සමඟ ප්‍රවේශම් වන්න.

මෙය Chrome සහ Internet Explorer යන දෙකටම හොඳින් ක්‍රියා කරයි:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Chrome සමඟ පමණක් ක්‍රියා කරන මෙම එක සමඟ සසඳන්න:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

මෙය තවත් විචලනය divදී divභාවිතා රටාව calc()CSS දී.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

මෙය ක්‍රියාත්මක වන්නේ, මන්ද:

• position:absolutedivඇතුළත නිවැරදිව ස්ථානගත කිරීම සඳහා adiv
• අපි දන්නවා අභ්යන්තර උස divඅපි එය සකස් නිසා 20px.
• calc(50% - 10px)සඳහා උස අඩ - 50% අභ්යන්තර කේන්ද්ර සඳහාdiv

මෙය හොඳින් ක්‍රියාත්මක වේ:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

සාස්

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

රූප ටැගය නොමැතිව සහ සමග <mat-icon>(එය අකුරු වර්ගයකි).

හ්ම්, මෙය විසඳීමට බොහෝ ක්‍රම තිබේ.

නමුත් මට <div>නියත වශයෙන්ම ස්ථානගත කර ඇති height:100%(ඇත්ත වශයෙන්ම top:0;bottom:0සහ ස්ථාවර පළල) සහdisplay:table-cell සිරස් අතට පෙළ පෙළට වැඩ කළේ නැත. මගේ විසඳුමට අභ්‍යන්තර පරතරය අවශ්‍ය විය, නමුත් වෙනත් බොහෝ විසඳුම් ද එසේ කරන බව මට පෙනේ, එබැවින් මම එය එකතු කළ හැකිය:

මගේ බහාලුම a වන .labelඅතර එහි අංකය සිරස් අතට කේන්ද්‍රගත කර ගැනීමට මට අවශ්‍යය. මම එය කළේ නියත වශයෙන්ම ස්ථානගත කිරීමෙන් top:50%සහ සැකසීමෙන්line-height:0

<div class="label"><span>1.</span></div>

CSS පහත පරිදි වේ:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

එය ක්‍රියාවෙන් බලන්න: http://jsfiddle.net/jcward/7gMLx/

ඔබට css භාවිතා කළ හැකිය flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS ජාලකය භාවිතා කිරීම මා වෙනුවෙන් එය කළා:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

වගු අංගයක් කාවැද්දීමට උත්සාහ කරන්න.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

කොට් .ාශයක මධ්‍යයේ අන්තර්ගතය හෝ රූපයක් ප්‍රදර්ශනය කිරීමට උපක්‍රම කිහිපයක් තිබේ . සමහර පිළිතුරු ඇත්තෙන්ම හොඳයි. මමත් මේවාට සම්පූර්ණයෙන්ම එකඟයි.

CSS හි නිරපේක්ෂ තිරස් හා සිරස් කේන්ද්‍රගත කිරීම

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

උදාහරණ සහිත තාක්ෂණික ක්‍රම 10 කට වඩා තිබේ . දැන් ඔබ කැමති එය ඔබට භාරයි.

display:table; display:table-Cellවඩා හොඳ උපක්‍රමයක් බවට සැකයක් නැත .

සමහර හොඳ උපක්‍රම පහත දැක්වේ:

උපක්රමය 1 - භාවිතා කිරීමෙන් display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSS කේතය

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

උපක්රමය 2 - භාවිතා කිරීමෙන් display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS කේතය

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

උපක්රමය 3 - භාවිතා කිරීමෙන් position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

ඔබට සිරස් අතට පෙළගැස්වීමට අවශ්‍ය දේවල් අඩංගු මූලද්‍රව්‍යයට මෙම පන්තිය එක් කරන්න

ඔබට min-heightදේපල සමඟ භාවිතා කිරීමට අවශ්‍ය නම් ඔබ මෙම CSS එක එකතු කළ යුත්තේ:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}