රූපයක් අසල පෙළ සිරස්ව පෙළගස්වන්නද?

ඇයි vertical-align: middleවැඩ කරන්නේ නැත්තේ? එහෙත්, vertical-align: top කරන්නේ වැඩ.

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

ඇත්ත වශයෙන්ම, මෙම අවස්ථාවේ දී එය තරමක් සරල ය: රූපයට සිරස් පෙලගැස්ම යොදන්න. ඒ සියල්ල එක පේළියක ඇති බැවින්, එය සැබවින්ම ඔබට පෙළගැස්වීමට අවශ්‍ය රූපය මිස පෙළ නොවේ.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

FF3 හි පරීක්ෂා කර ඇත.

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

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

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

සිරස්-පෙළගැස්වීම සඳහා සරල ක්‍රම කිහිපයක් මෙන්න:

එක් පේළියක සිරස්-පෙළගැස්ම: මැද

මෙය පහසුය: පෙළ මූලද්‍රව්‍යයේ රේඛීය උස කන්ටේනරයට සමාන ලෙස සකසන්න

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

බහු රේඛා සිරස්-පෙළගැස්ම: පහළ

එහි භාජනයට සාපේක්ෂව අභ්‍යන්තර බෙදීමක් නියත වශයෙන්ම ස්ථානගත කරන්න

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

බහු රේඛා සිරස්-පෙළගැස්ම: මැද

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

IE <= 7 හි පැරණි අනුවාදයන්ට ඔබ සහාය දිය යුතු නම්

පුවරුව හරහා මෙය නිවැරදිව ක්‍රියාත්මක කිරීම සඳහා, ඔබට CSS ටිකක් හැක් කිරීමට සිදුවේ. වාසනාවකට මෙන්, අපට පක්ෂව ක්‍රියා කරන IE දෝෂයක් තිබේ. කිරීම top:50%කන්ටේනර් හා top:-50%අභ්යන්තර div මත, ඔබ එම ප්රතිඵලයම ලබා ගත හැකි වනු ඇත. IE සහාය නොදක්වන තවත් අංගයක් භාවිතා කරමින් අපට මේ දෙක ඒකාබද්ධ කළ හැකිය: උසස් CSS තේරීම්.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

විචල්ය බහාලුම් උස සිරස්-පෙළගැස්ම: මැද

මෙම විසඳුම transform: translateYදේපල භාවිතා කරන බැවින් අනෙක් විසඳුම් වලට වඩා තරමක් නවීන බ්‍රව්සරයක් අවශ්‍ය වේ . ( http://caniuse.com/#feat=transforms2d )

මූලද්‍රව්‍යයකට පහත දැක්වෙන CSS පේළි 3 යෙදීම මව් මූලද්‍රව්‍යයේ උස නොතකා එය එහි මවුපියන් තුළ සිරස් අතට කේන්ද්‍රගත කරයි:

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

ඔබේ divනම්‍යශීලී භාජනයකට වෙනස් කරන්න :

div { display:flex; }

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

ක්රමය 1:

div { align-items:center; }

ඩෙමෝ

ක්රමය 2:

div * { margin-top:auto; margin-bottom:auto; }

ඩෙමෝ

imgසහ විවිධ අකුරු ප්‍රමාණ අගයන් මත විවිධ පළල සහ උස අගයන් උත්සාහ කරන්න, spanඑවිට ඒවා සෑම විටම කන්ටේනරය මැද රැඳී ඇති බව ඔබට පෙනෙනු ඇත.

vertical-align: middleඑය පරිපූර්ණ ලෙස කේන්ද්‍රගත වීමට නම් ඔබ මූලද්‍රව්‍ය දෙකටම අයදුම් කළ යුතුය.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

මෙම පිළිගත් පිළිතුර ඊළඟට ඇති පෙළ x-උස අඩක් පමණ මධ්යස්ථානය අයිකනය කරන්නේ (දී අර්ථ දක්වන පරිදි CSS උපැස් ). පෙළට ඉහළ හෝ පහළින් කැපී පෙනෙන ලෙස නැගී එන හෝ බැස යන අය සිටී නම්, එය ප්‍රමාණවත් විය හැකි නමුත් මඳක් look ත් වී පෙනේ:

වම්පස, පෙළ පෙළගස්වා නැත, දකුණු පසින් එය ඉහත පෙන්වා ඇත. සිරස්-පෙළගැස්ම පිළිබඳ සජීවී නිරූපණයක් මෙම ලිපියෙන් සොයාගත හැකිය .

vertical-align: topමෙම තත්වය තුළ ක්‍රියා කරන්නේ මන්දැයි කිසිවෙකු කතා කර තිබේද ? ප්‍රශ්නයේ රූපය බොහෝ විට පෙළට වඩා උස වන අතර එමඟින් රේඛා කොටුවේ ඉහළ දාරය අර්ථ දක්වයි. vertical-align: topපරතරය මූලද්‍රව්‍යය මත එය රේඛා කොටුවේ ඉහළින් ස්ථානගත කරන්න.

අතර හැසිරීම ප්රධාන වෙනස vertical-align: middleසහ topය (සියළුම සිරස් ප්රතිසංධාන ඉටු කිරීමට අවශ්ය ඕනෑම තැනක තබා මෙසේ ඒ වෙනුවට දැනෙනවා ඇති කොටුව ගේ පාදීය සාපේක්ෂව පළමු පියවර මූලද්රව්ය කලින් කිව නොහැකි වන රේඛාව කොටුව පිටත සීමාවන් දක්වා) හා දෙවන සාපේක්ෂ (වන වඩාත් ස්පර්ශ්‍ය).

ලොව පිළිගත් පිළිතුර දී භාවිතා කරන ලද තාක්ෂණය තනි-ගැසී පෙළ (සඳහා පමණක් ක්රියා demo ), නමුත් බහු-රේඛාව පෙළ ( demo ) - පවතින බවත්, ලෙස.

යමෙකුට රූපයකට බහු-පෙළ පෙළ සිරස් අතට කේන්ද්‍රගත කිරීමට අවශ්‍ය නම්, මෙන්න ක්‍රම කිහිපයක් ( මෙම CSS-Tricks ලිපියෙන් ආනුභාව ලත් ක්‍රම 1 සහ 2 )

ක්රමය # 1: CSS වගු ( FIDDLE ) (IE8 + ( කැනියස් ))

CSS:

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

ක්රමය # 2: බහාලුම්වල ව්යාජ මූලද්රව්යය ( FIDDLE ) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

ක්රමය # 3: ෆ්ලෙක්ස්බොක්ස් ( FIDDLE ) ( කැනියස් )

CSS (ඉහත ප්‍රහේලිකාවෙහි විකුණුම් උපසර්ග අඩංගු වේ):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

මෙම කේතය IE මෙන්ම FF හි ද ක්‍රියා කරයි:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

මෙය ක්‍රියාත්මක කිරීම සඳහා ඔබ line-heightකොට් of ාශයේ උස දක්වා සකස් කළ යුතු බැවිනි

මූලික වශයෙන්, ඔබට CSS3 වෙත බැසීමට සිදුවේ.

-moz-box-align: center;
-webkit-box-align: center;

වාර්තාව සඳහා, පෙළගැස්වීම "විධාන" SPAN මත ක්‍රියා නොකළ යුතුය, මන්ද එය පේළියේ ටැගයක් මිස බ්ලොක් මට්ටමේ ටැගයක් නොවේ. පෙළගැස්වීම, ආන්තිකය, පෑඩින් කිරීම වැනි දේ පේළියේ ටැගයක් මත ක්‍රියා නොකරනු ඇත.

CSS විසින් HTML ටැග් කාණ්ඩ දෙකකට බෙදා ඇත: පේළියේ සහ වාරණ මට්ටමේ. "Css block vs inline" සොයන්න සහ විශිෂ්ට ලිපියක් පෙන්වයි ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(මූලික CSS මූලධර්ම අවබෝධ කර ගැනීම එතරම් කරදරයක් නොවීමට යතුරකි)

line-height:30pxරූපය රූපය සමඟ පෙළ ගැසෙන පරිදි පරතරය සඳහා භාවිතා කරන්න :

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

ඔබට කළ හැකි තවත් දෙයක් නම්, පෙළ line-heightතුළ ඇති රූපවල ප්‍රමාණයට පෙළ සැකසීමයි <div>. ඉන්පසු පින්තූර සකසන්නvertical-align: middle;

එය බරපතලම පහසුම ක්‍රමයයි.

marginමෙම කිසිදු පිළිතුරකින් විසඳුමක් මෙතෙක් දැක නැත, එබැවින් මෙම ගැටලුවට මගේ විසඳුම මෙන්න.

මෙම විසඳුම ක්‍රියාත්මක වන්නේ ඔබේ රූපයේ පළල ඔබ දන්නේ නම් පමණි.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

මම සාමාන්‍යයෙන් 3px වෙනුවට භාවිතා කරමි top. එම අගය වැඩි කිරීමෙන් / අඩු කිරීමෙන් රූපය අවශ්‍ය උස දක්වා වෙනස් කළ හැකිය.

මෙම පරතර ගුණාංග ලියන්න

span{
    display:inline-block;
    vertical-align:middle;
}

display:inline-block;ඔබ vertical-alignදේපල භාවිතා කරන විට භාවිතා කරන්න.එය ඇසෝසියේටඩ් ගුණාංග වේ

දේපල inline elementභාවිතා කරමින් ඔබට රූපය සැකසිය හැකියdisplay

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

නිදසුනක් ලෙස, jQuery ජංගම දුරකථනයේ බොත්තමක් මත, මෙම ශෛලිය රූපයට යෙදීමෙන් ඔබට එය ටිකක් වෙනස් කළ හැකිය:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

බහු විසඳුම:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

සියලුම බ්‍රව්සර් වල සහ ie9 + හි ක්‍රියා කරයි

එය අවුල් සහගත විය හැකිය, මම එකඟ වෙමි. වගු විශේෂාංග භාවිතා කිරීමට උත්සාහ කරන්න. වෙබ් පිටුවේ කේන්ද්‍රයේ මොඩල ස්ථානගත කිරීම සඳහා මම මෙම සරල CSS උපක්‍රමය භාවිතා කරමි. එයට විශාල බ්‍රව්සර් සහාය ඇත:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

සහ CSS කොටස:

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

ඔබට අවශ්‍ය පරිදි වැඩ කිරීමට රූපයේ සහ මේස බහාලුමේ ප්‍රමාණය වෙනස් කර සකස් කළ යුතු බව සලකන්න. විනෝද වන්න.

පළමුවෙන්ම පේළිගත CSS නිර්දේශ නොකරයි, එය ඇත්ත වශයෙන්ම ඔබේ HTML අවුල් කරයි.

රූපය සහ පරතරය පෙළගැස්වීම සඳහා, ඔබට සරලව කළ හැකිය vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

එය ඔබගේ සංචාලනයේ බ්‍රව්සරයේ නොපෙන්වන්නේ මන්දැයි නිශ්චිතවම කිව නොහැක, නමුත් රූපයක් සහ කේන්ද්‍රීය පෙළක් සහිත ශීර්ෂයක් ප්‍රදර්ශනය කිරීමට උත්සාහ කරන විට මම සාමාන්‍යයෙන් මෙවැනි ස්නිපටයක් භාවිතා කරමි, එය උපකාරී වේ යැයි සිතමු!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

ඔබට මෙය බොහෝ විට අවශ්‍ය වනු ඇත:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

අනෙක් අය යෝජනා කර ඇති පරිදි, vertical-alignරූපය මත උත්සාහ කරන්න :

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS කරදරයක් නොවේ. ඔබ ලියකියවිලි කියවන්නේ නැත . ; පී