Bir div'deki metni dikey olarak nasıl hizalayabilirim?

Bir div ile metin hizalamak için en etkili yolu bulmaya çalışıyorum. Birkaç şeyi denedim ve hiçbiri işe yaramadı.

.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'de Dikey Merkezleme
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Makale özeti:

Bir CSS 2 tarayıcı için, içeriği ortalamak için display:table/ kullanabilirsiniz display:table-cell.

JSFiddle'da bir örnek de mevcuttur :

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>

Eski tarayıcıların (Internet Explorer 6/7) korsanlıklarını #, yeni tarayıcılardaki stilleri gizlemek için kullanarak stillerle birleştirmek mümkündür :

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Özniteliği eklemeniz gerekir ve bu özniteliğin yüksekliğiyle eşleşmelidir div. Senin durumunda:

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

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

Aslında, heightözniteliği tamamen kaldırabilirsiniz .

Bu yalnızca bir metin satırı için geçerlidir , bu yüzden dikkatli olun.

İşte harika bir kaynak

Gönderen http://howtocenterincss.com/ :

CSS'de merkezleme, kıçta bir ağrıdır. Çeşitli faktörlere bağlı olarak bunu yapmak için bir milyarlarca yol var gibi görünüyor. Bu onları birleştirir ve size her durum için ihtiyacınız olan kodu verir.

Flexbox'ı kullanma

Bu yayını en son teknoloji ile güncel tutmakla birlikte, Flexbox kullanarak bir şeyi ortalamanın çok daha kolay bir yolu. Flexbox, Internet Explorer 9 ve önceki sürümlerde desteklenmez .

İşte bazı harika kaynaklar:

• Flexbox kılavuzu
• Flexbox ile öğeleri merkezleme
• Flexbox için Internet Explorer 10 sözdizimi
• Flexbox desteği

Tarayıcı öneklerine sahip 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>

Başka bir çözüm

Bu sıfırdan üçtür ve altı satır CSS ile her şeyi ortalamanıza olanak tanır

Bu yöntem Internet Explorer 8 ve önceki sürümlerde desteklenmez .

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>

Önceki cevap

İşaretli cevaptaki bağlantılar olarak yararlı olan basit ve çapraz tarayıcı yaklaşımı biraz eskimiş.

JavaScript veya CSS satır yüksekliklerine başvurmadan, metni sıralanmamış bir listede ve div'de dikey ve yatay olarak ortalama . Ne kadar metniniz olursa olsun, belirli listelere veya div'lere özel sınıf uygulamak zorunda kalmazsınız (kod her biri için aynıdır). Bu, Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera ve Safari dahil olmak üzere tüm büyük tarayıcılarda çalışır . Modern tarayıcıların sahip olmadığı CSS sınırlamaları nedeniyle onlara yardımcı olacak iki özel stil sayfası (biri Internet Explorer 7 için ve diğeri Internet Explorer 6 için) vardır.

Andy Howard - Metni sırasız bir listede veya div'de dikey ve yatay olarak ortalama

Çalıştığım son proje için Internet Explorer 7/6'yı fazla umursamadığım için, hafifçe soyulmuş bir versiyon kullandım (yani Internet Explorer 7 ve 6'da çalışmasını sağlayan şeyleri kaldırdım). Başka biri için yararlı olabilir ...

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>

İle kolaydır display: flex. Aşağıdaki yöntemle, içindeki metin divdikey olarak ortalanır:

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

<div>
  Your text here.
</div>

Ve isterseniz yatay:

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

<div>
  Your text here.
</div>

İhtiyacınız olan tarayıcı sürümünü görmelisiniz; eski sürümlerde kod çalışmaz.

Rasgele öğeleri kolayca dikey olarak ortalamak için aşağıdakileri kullanıyorum:

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%);
}

Bu, metni div200 piksel yüksekliğindeki bir dış kısmın tam dikey ortasına ortalar div. Bunun tarayıcınız için çalışması için bir tarayıcı öneki ( -webkit-benim durumumda olduğu gibi ) kullanmanız gerekebileceğini unutmayın .

Bu sadece metin için değil, diğer öğeler için de geçerlidir.

Ekranı 'tablo hücresi'ne ayarlayıp aşağıdakileri uygulayarak bunu yapabilirsiniz vertical-align: middle;:

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

Ancak http://www.w3schools.com/cssref/pr_class_display.asp dosyasından izinsiz olarak kopyaladığım bu alıntıya göre Internet Explorer'ın tüm sürümleri tarafından desteklenmemektedir .

Not: "satır içi tablo", "tablo", "tablo başlığı", "tablo hücresi", "tablo sütunu", "tablo-sütun grubu", "tablo satırı", "tablo satırı değerleri -group "ve" inherit "Internet Explorer 7 ve öncesi tarafından desteklenmez. Internet Explorer 8 için! DOCTYPE gerekir. Internet Explorer 9 değerleri destekler.

Aşağıdaki tabloda http://www.w3schools.com/cssref/pr_class_display.asp adresinden de izin verilen görüntüleme değerleri gösterilmektedir .

Bugünlerde (artık Internet Explorer 6-7-8'e ihtiyacımız yok) display: tableBu sorun (veya display: flex) için sadece CSS kullanırım .

Daha eski tarayıcılar için:

Tablo:

.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>

Esnek:

.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>

Bu (aslında) bu sorun için en sevdiğim çözümdü (basit ve çok iyi tarayıcı destekli):

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>

Bunu deneyin, üst div'e ekleyin:

display: flex;
align-items: center;

İşte tek bir metin satırı için en iyi sonucu veren bir çözüm.

Satır sayısı biliniyorsa, bazı satırlar içeren çok satırlı metinler için de kullanılabilir.

.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 */
}

İşte bir 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>

Flexbox'ı kullanarak orta metni div içinde dikey olarak hizalayabilirsiniz.

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

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

Bu konuda daha fazla bilgiyi Flexbox'ın Tam Kılavuzunda bulabilirsiniz .

Bu basit çözümü kontrol edin:

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

İçeriği tablo / tablo hücresine başvurmadan dikey olarak hizalamanın daha basit bir yolu vardır:

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

İçinde, kabın tüm yüksekliğini varsayan görünmez (genişlik = 0) bir div ekledim.

Internet Explorer ve Firefox'ta (en son sürümler) çalışıyor gibi görünüyor. Diğer tarayıcılarla kontrol etmedim

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

Ve elbette 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%;
}

Bu bulduğum en temiz çözüm (Internet Explorer 9+) ve transform-stylediğer yanıtların atlanmış olduğunu kullanarak ".5 piksel kapalı" sorunu için bir düzeltme ekler .

.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%);
}

Kaynak: Her şeyi sadece 3 satır CSS ile dikey olarak hizalayın

Değerleri bilmeyen bir unsur için basit bir çözüm:

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%);
}

Adam Tomat'ın cevabına göre div içindeki metni hizalamak için bir JSFiddle örneği hazırlandı :

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

display: flex kullanarak 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 */
}

başka bir örnek ve bir blog yazısında birkaç açıklama ile .

Bir ızgara öğesinde otomatik kenar boşluğu.

Flexbox'a benzer şekilde, bir ızgara öğesine otomatik kenar boşluğu uygulamak her iki eksende ortalar:

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

Flexbox benim için mükemmel çalıştı, üst div içindeki birden çok öğeyi yatay ve dikey olarak ortaladı .

HTML Kodu:

<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-Kodu:
Aşağıdaki kod, üst-div içindeki tüm öğeleri bir sütunda toplar ve öğeleri yatay ve dikey olarak ortalar. İki Ankraj öğesini aynı satırda (satır) tutmak için child-div'ı kullandım. Child-div olmadan her üç öğe de (Anchor, Anchor & Paragraph) üst-div sütununun içinde üst üste dizilir. Burada üst-div sütununun içinde yalnızca child-div dizilir.

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

kullanın:

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>

Bu hile ile, merkezi sola hizalamak için "left: 0" eklemesini istemiyorsanız herhangi bir şeyi hizalayabilirsiniz.

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;
 }

Flex kullanarak, tarayıcıların oluşturulmasındaki farklılıklara dikkat edin.

Bu, hem Chrome hem de Internet Explorer için iyi çalışır:

.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>

Yalnızca Chrome ile çalışan bu ile karşılaştırın:

.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>

Bu, CSS'de kullanılan divbir divdesendeki başka bir varyasyon calc().

<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>

Bu işe yarar, çünkü:

• position:absolutediviçinde hassas bir şekilde yerleştirmek içindiv
• biz biliyoruz iç yüksekliğini divbiz ayarlayın çünkü 20px.
• calc(50% - 10px)için % 50 - yarı yükseklikte iç merkezlemediv

Bu iyi çalışıyor:

HTML

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

şımarıklık

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

Resim etiketi olmadan ve ile birlikte <mat-icon>(bir yazı tipi).

Hmm, bunu çözmenin pek çok yolu var.

Ama <div>kesinlikle height:100%(aslında top:0;bottom:0ve sabit genişlik) konumlandırılmış bir var ve display:table-cellsadece metni dikey olarak ortalamak için işe yaramadı. Çözümüm iç açıklık elemanı gerektiriyordu, ancak diğer çözümlerin çoğunun da yaptığını görüyorum, bu yüzden de ekleyebilirim:

Benim kabım bir .labelve sayının dikey olarak ortalanmasını istiyorum. Kesinlikle konumlandırarak top:50%ve ayarlayarak yaptımline-height:0

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

Ve CSS aşağıdaki gibidir:

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

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

Uygulamaya bakın: http://jsfiddle.net/jcward/7gMLx/

Css kullanabilirsiniz 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 ızgarasını kullanmak benim için yaptı:

.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>

Bir tablo öğesini gömmeye çalışın.

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

Bir div'in merkezinde içerik veya görüntü görüntülemek için birkaç püf noktası vardır . Bazı cevaplar gerçekten güzel ve ben de bunlara tamamen katılıyorum.

CSS'de Mutlak Yatay ve Dikey Merkezleme

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

Örneklerle 10'dan fazla teknik var . Şimdi tercih ettiğiniz size kalmış.

Şüphesiz display:table; display:table-Celldaha iyi bir numara.

Bazı iyi hileler şunlardır:

Hüner 1 - Kullanarak 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 Kodu

.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;
}

Trick 2 - Kullanarak display:inline-block

HTML

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

CSS kodu

.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. Numara - Kullanarak 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;
}

Bu sınıfı, dikey olarak hizalamak istediğiniz şeyleri içeren öğeye ekleyin

Mülkle birlikte kullanmanız min-heightgerekiyorsa bu CSS'yi aşağıdakilere eklemeniz gerekir:

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