Metni dikey olarak CSS ile nas─▒l ortalayabilirim? [├žift]


Al─▒nan cevaba git


Bu sorunun zaten burada bir cevab─▒ var:

Metin i├žeren bir div ├Â─čem var ve bu div'in i├žeri─čini dikey olarak ortalamak istiyorum.

─░┼čte benim div tarz─▒m:

 #box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
} 
 <div id="box">
  Lorem ipsum dolor sit
</div> 

Bunu yapman─▒n en iyi yolu nedir?


2167









Cevap say─▒s─▒n─▒ say: 30






Bu temel yakla┼č─▒m─▒ deneyebilirsiniz:

 div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
} 
 <div>
  Hello World!
</div> 

Yine de sadece tek bir metin sat─▒r─▒ i├žin i┼če yarar, ├ž├╝nk├╝ sat─▒r─▒n y├╝ksekli─čini i├žeren kutu eleman─▒ ile ayn─▒ y├╝ksekli─če ayarlad─▒k.


Daha ├žok y├Ânl├╝ bir yakla┼č─▒m

Bu, metni dikey olarak hizalaman─▒n ba┼čka bir yoludur. Bu ├ž├Âz├╝m, tek bir sat─▒r ve birden ├žok metin sat─▒r─▒ i├žin ├žal─▒┼čacak, ancak yine de sabit bir y├╝kseklik kab─▒ gerektiriyor:

 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> 

CSS sadece boyutland─▒r─▒r <div> , dikey merkez ├žizginin y├╝ksekli─čini e┼čit y├╝ksekli─čini <span> ayarlayarak hizalar <div> ve <span> bir sat─▒r i├ži blok yapar vertical-align: middle . Daha sonra sat─▒r y├╝ksekli─čini tekrar normale d├Ând├╝r├╝r <span> , b├Âylece i├žeri─či blok i├žinde do─čal olarak akacakt─▒r.


Tablo g├Âsterimini sim├╝le etme

Ve i┼čte ba┼čka bir se├ženek, desteklemeyen display: table display: table-cell eski taray─▒c─▒larda ├žal─▒┼čmayabilir ve (temel olarak yaln─▒zca Internet Explorer 7). CSS kullanarak tablo davran─▒┼č─▒n─▒ sim├╝le ediyoruz (├ž├╝nk├╝ tablolar dikey hizalamay─▒ destekliyor) ve HTML ikinci ├Ârnekle ayn─▒:

 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> 


Mutlak konumland─▒rma kullanma

Bu teknik, 0, yukar─▒, a┼ča─č─▒, sola ve sa─ča ayar yapan kesinlikle konumland─▒r─▒lm─▒┼č bir eleman kullan─▒r. Cmas, Smashing Magazine, CSS In Mutlak Yatay ve Dikey Merkezleme ba┼čl─▒kl─▒ makalesinde daha ayr─▒nt─▒l─▒ olarak a├ž─▒klanm─▒┼čt─▒r .


2753







Ba┼čka bir yol (hen├╝z burada bahsedilmedi) Flexbox'ta .

Kapsay─▒c─▒ ├Â─čeye a┼ča─č─▒daki kodu eklemeniz yeterlidir:

 display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
 

Flexbox demosu 1

 .box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
} 
 <div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div> 

Alternatif olarak, i├žeri─či kab─▒n i├žinden hizalamak yerine , esnek kutu ayr─▒ca , esnek kab─▒n i├žinde sadece bir esnek ├Â─če bulundu─čunda (yukar─▒daki soruda verilen ├Ârnekte oldu─ču gibi) bir esnek ├Â─čeyi bir otomatik kenar bo┼člu─čuyla ortalayabilir .

B├Âylece esnek ├Â─čeyi hem yatay hem de dikey olarak ortalamak i├žin margin:auto

Flexbox Demo 2

 .box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
} 
 <div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div> 

Not: Yukar─▒dakilerin t├╝m├╝, yatay s─▒ralara yerle┼čtirilirken merkezleme ├Â─čeleri i├žin ge├žerlidir . Bunun nedeni, varsay─▒lan olarak, ayn─▒ zamanda de─čeri varsay─▒lan davran─▒┼čt─▒r flex-direction D─░R row . Bununla birlikte, esnek ├Â─čelerin dikey s├╝tunlarda yerle┼čtirilmesi gerekiyorsa , o zaman flex-direction: column ana ekseni s├╝tun olarak ayarlamak i├žin kab─▒n ├╝zerine yerle┼čtirilmeli ve ek olarak justify-content ve align-items ├Âzellikleri ┼čimdi dikey olarak merkezleme ve yatay olarak merkezleme ile di─čer yolla ├žal─▒┼čmal─▒d─▒r ) justify-content: center align-items: center

flex-direction: column g├Âsteri

 .box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  } 
 <div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div> 

Baz─▒ ├Âzelliklerini g├Ârmek ve maksimum taray─▒c─▒ deste─či i├žin s├Âzdizimi almak i├žin Flexbox ile ba┼člamak i├žin iyi bir yer flexybox'lard─▒r.

Ayr─▒ca, g├╝n├╝m├╝zde taray─▒c─▒ deste─či ├žok iyi: caniuse

├çapraz taray─▒c─▒ uyumlulu─ču i├žin display: flex ve align-items a┼ča─č─▒daki kullanabilirsiniz:

 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;
 

1197







A┼ča─č─▒daki CSS kodunu ekleyerek bunu kolayca yapabilirsiniz:

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

Bu, CSSÔÇÖniz nihayet ┼čuna benziyor demektir:

 #box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
} 
 <div id="box">
  Some text
</div> 


130







Ba┼čvuru ve daha basit bir cevap eklemek i├žin:

Saf CSS:

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

Veya SASS / SCSS Mixin olarak:

 @mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
 

Taraf─▒ndan kullan─▒m:

 .class-to-center {
    @include vertical-align;
}
 

Sebastian Ekstr├Âm'├╝n blog yaz─▒s─▒ Vertical taraf─▒ndan her ┼čeyi sadece 3 sat─▒rl─▒k CSS ile hizalay─▒n :

Bu y├Ântem, eleman─▒n ÔÇťyar─▒m pikselÔÇŁ ├╝zerine yerle┼čtirilmesi nedeniyle elemanlar─▒n bulan─▒k olmas─▒na neden olabilir. Bunun i├žin bir ├ž├Âz├╝m, ├╝st ├Â─česini korumak i├žin 3d olarak ayarlamakt─▒r. A┼ča─č─▒daki gibi:

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

2015 + 'da ya┼č─▒yoruz ve Flex Box her modern taray─▒c─▒ taraf─▒ndan destekleniyor.

Bundan b├Âyle web sitelerinin yap─▒ld─▒─č─▒ yol olacakt─▒r.

├ľ─čren!


116


2014-10-25





T├╝m kredi bu ba─člant─▒ sahibine gider @ Sebastian Ekstr├Âm Link ; l├╝tfen bunu atla. Eylem codepen bak─▒n . Yukar─▒daki makaleyi okuyarak da bir demo keman─▒ yaratt─▒m .

Sadece ├╝├ž sat─▒r CSS ile (sat─▒c─▒ ├Ânekleri hari├ž) bir d├Ân├╝┼č├╝m yard─▒m─▒ ile yapabiliriz: translateY, y├╝ksekli─čini bilmesek bile, ne istersek dikey olarak ortalar.

CSS ├Âzellik d├Ân├╝┼č├╝m├╝ genellikle ├Â─čeleri d├Ând├╝rmek ve ├Âl├žeklendirmek i├žin kullan─▒l─▒r, ancak translateY i┼člevi ile art─▒k ├Â─čeleri dikey olarak hizalayabiliriz. Genellikle bu, mutlak konumland─▒rma veya sat─▒r y├╝kseklikleri ayarlama ile yap─▒lmal─▒d─▒r, ancak bunlar ├Â─čenin y├╝ksekli─čini bilmenizi gerektirir veya yaln─▒zca tek sat─▒rl─▒k metinler vb.

Yani, bunu yapmak i├žin yaz─▒yoruz:

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

Tek ihtiyac─▒n olan bu. Bu, mutlak konum y├Ântemine benzer bir tekniktir, ancak ba┼č k─▒sm─▒ ├╝stte eleman ├╝zerinde herhangi bir y├╝kseklik ayarlamam─▒z gerekmemektedir. Internet Explorer 9'da bile kutudan ├ž─▒kt─▒─č─▒ gibi ├žal─▒┼č─▒yor !

Daha da basitle┼čtirmek i├žin, sat─▒c─▒ ├Ânekleriyle bir kar─▒┼č─▒m olarak yazabiliriz.


63







CSS3'te sunulan Flexbox'lar ├ž├Âz├╝md├╝r:

 /* Important */
section {
    display: flex;
    display: -webkit-flex;
}
p {
    /* Key Part */
    margin: auto;
}


/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
p {
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
} 
 <section>
    <p>
        I'm a centered box!<br/>
        Flexboxes are great!
    </p>
</section> 

─░pucu : Metni ortalamak istiyorsan─▒z, yukar─▒daki "Anahtar B├Âl├╝m" olarak belirtilen sat─▒r─▒ bu sat─▒rlardan biriyle de─či┼čtirin:

1) Sadece dikey olarak:

 margin: auto 0;
 

2) Sadece yatay olarak:

 margin: 0 auto;
 

G├Ârd├╝─č├╝m gibi, bu numara display: grid ayn─▒ zamanda ─▒zgaralarla da ├žal─▒┼č─▒yor.


40







Esnek yakla┼č─▒m

 div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
} 
 <div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div> 


22







Cevap olarak kabul edilen ├ž├Âz├╝m line-height , div y├╝ksekli─či ile ayn─▒ kullanmak i├žin m├╝kemmel , ancak metin sar─▒l─▒ VEYA iki sat─▒rda oldu─čunda bu ├ž├Âz├╝m m├╝kemmel ├žal─▒┼čmaz.

Metin sar─▒lm─▒┼čsa veya bir div i├žindeki birden ├žok sat─▒rdaysa bunu deneyin.

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

Daha fazla referans i├žin, bak─▒n─▒z:


18







Bu ├ž├Âz├╝m├╝ deneyin :

 .EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
} 
 <div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div> 

Kullan─▒larak in┼ča edilen CSS + .


14







A┼ča─č─▒daki kod par├žas─▒n─▒ referans olarak kullanabilirsiniz. Benim i├žin bir cazibe gibi ├žal─▒┼č─▒yor:

 <!DOCTYPE html>
<html lang="de">
    <head>
        <title>Vertically Center Text</title>
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        body {
            display: table;
        }
        .centered-text {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body style="background:#3cedd5">
        <div class="centered-text">
            <h1>Yes, it's my landing page</h1>
            <h2>Under construction, coming soon!!!</h2>
        </div>
    </body>
</html> 

Yukar─▒daki kod par├žac─▒─č─▒n─▒n ├ž─▒kt─▒s─▒ a┼ča─č─▒daki gibidir:


Resim tan─▒m─▒n─▒ buraya girin


13







Ayr─▒ca a┼ča─č─▒daki ├Âzellikleri de kullanabilirsiniz.

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

12







Di─čer yol:

height ├ľzniteli─čini ayarlamay─▒n div , ancak padding: efekti elde etmek i├žin kullan─▒n . Sat─▒r y├╝ksekli─čine benzer ┼čekilde, yaln─▒zca bir sat─▒r metniniz varsa ├žal─▒┼č─▒r. Bu ┼čekilde, daha fazla i├žeri─činiz varsa, metin yine de ortalan─▒r, ancak div'in kendisi biraz daha b├╝y├╝k olur.

Yani ile gitmek yerine:

 div {
  height: 120px;
  line-height: 120px;
}
 

S├Âyleyebilirsin:

 div {
   padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
 

Bu ├╝st ve alt ayarlayacakt─▒r padding ait div etmek 60px ve sol ve sa─č padding hale s─▒f─▒ra div 120 piksel (art─▒ yaz─▒ tipi y├╝ksekli─čini) en y├╝ksek ve dikey div merkezli yerle┼čtirilen metnin.


12







─░┼čte flexbox kullanarak ba┼čka bir se├ženek.

HTML

 <div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>
 

CSS

   #container {
    display: flex;
  }

  .child {
    margin: auto;
  }
 

Sonu├ž


Resim tan─▒m─▒n─▒ buraya girin


8







Kimsenin writing-mode yola ├ž─▒kt─▒─č─▒ndan emin de─čilim , ancak sorunun temiz bir ┼čekilde ├ž├Âz├╝ld├╝─č├╝n├╝ ve geni┼č bir deste─če sahip oldu─čunu d├╝┼č├╝n├╝yorum :

 .vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
} 
 <div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div> 

Bu, elbette, ihtiyac─▒n─▒z olan her boyutta ├žal─▒┼čacakt─▒r (ebeveynin% 100'├╝ d─▒┼č─▒nda). S─▒n─▒r ├žizgilerini a┼čarsan─▒z, kendinizi tan─▒man─▒z faydal─▒ olacakt─▒r.

Keman i├žin JSFiddle demo .

Caniuse deste─či :% 85.22 +% 6.26 = % 91.48 (Internet Explorer'da bile!)


6







T├╝m dikey hizalama ihtiya├žlar─▒n─▒z i├žin!

Bu Mixin'i ilan edin:

 @mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 

Sonra onu elementinize dahil edin:

 .element{
    @include vertical-align();
}
 

5







Bunun i├žin daha iyi bir fikir. Bunu da yapabilirsin

 body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
} 
 <div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div> 


5







Transform ├Âzelli─čini deneyin:

  #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 
  <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> 


4







Tek bir metin sat─▒r─▒ i├žin (veya tek bir karakter) bu tekni─či kullanabilirsiniz:

Bu olabilir kullan─▒lacak #box bir sabit olmayan sahip % nispi y├╝kseklik .

<div id="box"></div>

 #box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}
 

JsBin'de (CSS'i d├╝zenlemek daha kolay) veya JsFiddle'da (sonu├ž ├žer├ževesinin y├╝ksekli─čini de─či┼čtirmek daha kolay ) canl─▒ bir demo izleyin .

─░├ž metni CSS'ye de─čil HTML'ye yerle┼čtirmek istiyorsan─▒z, metin i├žeri─čini ek sat─▒r i├ži ├Â─čeye sarman─▒z ve #box::after e┼čle┼čmesi i├žin d├╝zenlemeniz gerekir. (Ve tabi ki content: m├╝lkler kald─▒r─▒lmal─▒.)

├ľrne─čin <div id="box"><span>TextContent</span></div> ,. Bu durumda, #box::after ile de─či┼čtirilmelidir #box span .

Internet Explorer 8 deste─či i├žin :: ile de─či┼čtirmeniz gerekir : .


4


2014-02-01





Basit ve ├žok y├Ânl├╝ yol ( Michielvoo'nun masa yakla┼č─▒m─▒ gibi ):

 [ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}
 

Bir ana etikette bu niteli─či (veya e┼čde─čer bir s─▒n─▒f─▒) kullanmak, bir├žok ├žocu─čun uyum sa─člamas─▒ i├žin bile ├žal─▒┼č─▒r:

 <parent ctrv>  <ch1/>  <ch2/>   </parent>
 

4







Merkezi dikey olarak hizalamak i├žin ├žok basit ve en g├╝├žl├╝ bir ├ž├Âz├╝m:

 .outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
} 
 <div class="outer-div">
  <span class="inner">No data available</span>
</div> 


3







A┼ča─č─▒daki kod, ekran boyutuna veya div boyutuna bakmaks─▒z─▒n div'i ekran─▒n ortas─▒na koyacakt─▒r :

 .center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
} 
  <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html> 

flex Burada daha fazla ayr─▒nt─▒ g├Âr├╝n .


3







├ľnceki cevaplar─▒ g├Ârd├╝m ve onlar sadece bu ekran geni┼čli─či i├žin i┼če yarayacak (yan─▒t vermiyor). Duyarl─▒l─▒k i├žin esnek kullanman─▒z gerekir.

├ľrnek:

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

3







A┼ča─č─▒daki kodu deneyin:

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

 div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
} 
 <div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div> 


3







Sat─▒r y├╝ksekli─či ve dald─▒rma y├╝ksekli─či solumas─▒ ihtiyac─▒n─▒ ortadan kald─▒rmak i├žin Michielvoo'nun cevab─▒n─▒ geni┼čletmek istiyorum . Temelde b├Âyle basitle┼čtirilmi┼č bir versiyonudur:

 div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
} 
 <div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div> 

Not: yorumlanan k─▒sm─▒ ├ževreleme css i├žin gereklidir . fixed-height div


3







Dikey olarak ortalanm─▒┼č, ancak Internet Explorer 9 tuhafl─▒─č─▒n─▒n ├╝stesinden gelmek i├žin bir masa kullanmadan bir dizi t─▒klanabilir file ihtiyac─▒m vard─▒.

Sonunda en iyi CSS'i (ihtiya├žlar─▒m i├žin) buldum ve Firefox, Chrome ve Internet Explorer 11 ile harika. Ne yaz─▒k ki Internet Explorer 9 hala bana g├╝l├╝yor ...

 div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
} 
 <div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div> 

A├ž─▒k├žas─▒ s─▒n─▒rlara ihtiyac─▒n─▒z yok, ama nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ g├Ârmenize yard─▒mc─▒ olabilirler.


2


2014-10-30





Konumland─▒rma y├Ântemini CSS'de kullanabilirsiniz:

Burada sonucu kontrol edin ....

HTML:

 <div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>
 

CSS:

 .relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}
 

Umar─▒m bu y├Ântemi de kullan─▒rs─▒n─▒z.


2







K├╝├ž├╝k g├Ârsel 3B efektini button ├Ânemsemiyorsan─▒z, bunun yerine onu ayarlay─▒n div .

 #box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
} 
 <button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button> 


1







Bu kolay ve ├žok k─▒sa:

 .block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
} 
 <div class="body">
  <span class="tile">
    Hello middle world! :)
  </span>
</div> 


1







Mutlak Konumland─▒rma ve Germe

Yukar─▒daki y├Ântemde oldu─ču gibi, bu durum ebeveyn ve alt ├Â─čeler ├╝zerinde s─▒ras─▒yla s─▒ras─▒yla g├Âreceli ve mutlak konumland─▒rma yaparak ba┼člar. Oradan her ┼čey farkl─▒.

A┼ča─č─▒daki kodda, ├žocu─ču hem yatay hem de dikey olarak ortalamak i├žin bir kez daha bu y├Ântemi kulland─▒m, ancak y├Ântemi yaln─▒zca dikey merkezleme i├žin kullanabilirsiniz.

HTML

 <div id="parent">
    <div id="child">Content here</div>
</div>
 

CSS

 #parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}
 

Bu y├Ântemin amac─▒, ├╝st, alt, sa─č ve sol de─čerleri 0'a ayarlayarak alt ├Â─čenin d├Ârt kenara kadar gerilmesini sa─člamaya ├žal─▒┼čmakt─▒r. d├Ârt kenar

Ancak otomatik olarak d├Ârt taraftaki kenar bo┼člu─ču olarak ayarlamak, kar┼č─▒t kenar bo┼čluklar─▒n─▒n e┼čit olmas─▒na neden olur ve ├žocu─čumuzu div'in merkezinde g├Âsterir.

Maalesef yukar─▒dakiler Internet Explorer 7 ve alt─▒nda ├žal─▒┼čmayacakt─▒r ve ├Ânceki y├Ântemde oldu─ču gibi alt div i├žindeki i├žerik ├žok b├╝y├╝k olabilir ve bu da gizlenmesine neden olur.


1







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

Bu k├╝├ž├╝k kodu elementinizin CSS ├Âzelli─čine ekleyin. Bu m├╝kemmel. Dene!


0



─░lgili yay─▒nlar


Bir TextView'da metni yatay ve dikey olarak nas─▒l ortalayabilirim?

Metni CSS ile nas─▒l de─či┼čtirebilirim?

CSS taray─▒c─▒ ile dikey metni nas─▒l ├žizebilirim?

Metin se├žimini CSS veya JavaScript ile nas─▒l devre d─▒┼č─▒ b─▒rak─▒r─▒m? [├žift]

Bir div i├žinde bir <span> dikey olarak nas─▒l ortalan─▒r? [├žift]

Dikey olarak div i├žinde de─či┼čken y├╝kseklikte i├žerik nas─▒l ortalan─▒r?

Dikey divs nas─▒l ortalan─▒r? [├žift]

Intellij IDEAÔÇÖda metni yeni bir sat─▒rla nas─▒l de─či┼čtiririm?

Bir <td> i├žine bo┼čluk b─▒rakmadan metni nas─▒l sarabilirim?

CSS ile Microsoft Edge nas─▒l hedeflenir? [├žift]

Etiketle ilgili di─čer sorular [html]


Bir SQL Server tablosunda bir s├╝tun olup olmad─▒─č─▒n─▒ kontrol etme?

Dizi yineleme ile ÔÇťforÔÇŽ inÔÇŁ kullanmak neden k├Ât├╝ bir fikir?

Bir div i├žindeki g├Âr├╝nt├╝y├╝ dikey olarak hizalama

Yeniden y├╝klemeye ba┼člad─▒ysam, iki i┼člemi nas─▒l bir araya getirebilirim?

Ba─člant─▒y─▒ yeni sekmede veya pencerede a├ž [├žo─čalt]

Bir yakut m├╝cevher belirli bir s├╝r├╝m├╝n├╝ nas─▒l kurulur?

Sadece CSS kullanarak bir ba─člant─▒ nas─▒l devre d─▒┼č─▒ b─▒rak─▒l─▒r?

IEnumerable <T> / IQueryable <T> ile Dinamik LINQ OrderBy

Java'da <Integer> Listesini int [] 'a nas─▒l d├Ân├╝┼čt├╝r├╝r├╝m? [├žift]

Gittikten sonra i┼čten ├ž─▒karmaya nas─▒l karar verilir?