Soru Öğelerin ortalanmış kılavuzunda sola hizalanan son satır


Benim için ayarlanmış aynı büyüklükte bloklar var. display:inline-block sahip bir div içinde text-align:center blokları hizalamak için ayarlayın.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

Bloklar, div'u yatay olarak doldurur ve tarayıcı penceresi küçüldükçe, bazı satırlar yeni satırlara bölünerek daha fazla satır ve daha az sütun oluşturur. Her şeyin hala merkezde kalmasını istiyorum, son satır sola hizalanmış olarak hizalanmış gibi:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

Şu anda olan şudur:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

Bir öneri gibi ekstra doldurma div'ları ekleyemem çünkü herhangi bir sayıda blok olabilir ve satır ve sütunların miktarı tarayıcı genişliğine bağlı olarak değişecektir. Aynı sebepten dolayı doğrudan 7 numaralı bloğu da yapılamam. Bloklar her zaman merkezde kalmalıdır kaç sütun olursa olsun.

İşte daha iyi göstermek için bir kalem:

http://codepen.io/anon/pen/IDsxn

Mümkün mü? Olması gerektiği gibi hissediyorum. Sadece ie10 + olduğu gibi flexbox kullanmamayı tercih ederim ve ie9 + 'yu tercih ederim. Saf bir CSS çözümünü gerçekten çok isterdim, ama eğer bana JS'nin tek yol olduğunu söylerseniz, bunu görmeyi çok isterim.

Referans - benzer sorular için, hiçbiri tam olarak açıklanmamıştır:

Birden çok satırda sol son satır / satır hizalama

CSS - Ortalanmış bir div içindeki resimlerin son sırasını sola hizala

Konteynır ortalanmış halde kalırken sıvı kabı ızgarasındaki elemanların son satırının ortalanarak hizalanması sağlanır.

CSS ile birden fazla satır içi bloğu ortalayın ve son satırı sola hizalayın


46
2017-10-22 19:55


Menşei


@ j08691 - ekran genişliği konteyner maksimum genişliğinden daha küçükse, sorunu görürsünüz. - andi
kabın üzerine bir arka plan rengi koymak, o zaman nasıl mükemmel ortalanmış göreceksiniz. - andi
Bunun mümkün olmadığını tahmin edebilirim. Ya da her ekran boyutu için kapsayıcı genişliğini tam olarak belirtmek için çok fazla medya sorgusuna ihtiyacınız olabilir. - andi
@IvanDurst, uzun bir süredir onunla oynadım ve inline elemanların neden bu kadar zor olduğunu keşfediyorum. Bunlar aslında metinlerdir (html'inizdeki boşluk tuhaf olabilir). İçinde bulundukları genişliğin sonuna geldiklerinde, shrink-wrapping yoktur. Hattın ne zaman biteceğine dair bir işaretin yok, bu yüzden noktalama işaretini kolayca asamıyoruz. Bu zor bir:) - Costa
Cevabımı, probleminize nasıl bulduğumu anladım. - user3442612


Cevaplar:


İşte size çok basit bir JavaScript (ve CSS'nizdeki bazı küçük değişiklikler) çözümü:

http://jsfiddle.net/ha68t/

Benim için iyi çalışıyor.

CSS:

.container {
  margin: 0 auto;
  max-width:960px;
  background-color: gold;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: block;
  float: left;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

JavaScript:

$(document).ready(function(){
    setContainerWidth();
});

$(window).resize(function(){
   setContainerWidth();
});

function setContainerWidth()
{
    $('.container').css('width', 'auto'); //reset
    var windowWidth = $(document).width();
    var blockWidth = $('.block').outerWidth(true);
    var maxBoxPerRow = Math.floor(windowWidth / blockWidth);
    $('.container').width(maxBoxPerRow * blockWidth);
}

jQuery gereklidir :)


12
2018-05-23 13:31



Bu sayfadaki en kolay uygulama, küçük bir js kullanmak zorunda olsa bile. Artık çözüme ihtiyacım yok, ama birisi olacak! - Ivan Durst
Sorunuzda "gerçekten bir CSS çözümü olmasını" beklediniz, ancak bu cevabı kabul edildi olarak işaretlediniz. Neler olduğundan emin değil, tam tersi mi? Öyle ise, bu demek değil mi? Ama eğer değilse, öyle olmasa bile anlamı var mı? Ben kimim? Saat kaç? Waldo Nerede? Bu çok parlak ışık nedir? Anne? ........ - Cthulhu
@ Cthulhu: hah. "Gerçekten yapardım sevmek saf bir CSS çözümü, ancak bana JS'nin tek yol olduğunu söylerseniz, bunu eylemde görmeyi çok isterim. ”Harekete geçirdi. En iyi çözümünü beğendim. - Ivan Durst
Bu gerçekten kabul edilen çözüm jQuery :( kullanırsa ne kadar bozuk CSS olduğunu gösterir - daniel.sedlacek


Ekran içi satır bloğu ile çözüm

Bu uyarlamalı ızgara çok daha basittir: daha az biçimlendirme ve daha az CSS, bu nedenle bir üretim alanında uygulanması ve tam ihtiyaçlarınıza göre uyarlanması daha kolay olacaktır.

= >> DEMO << = (efekti görmek için sonuç penceresini yeniden boyutlandırın)

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}
<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>

İçerir :

  1. 4 medya sorgusu 200px geniş bloklar ve 1000 px'ye genişletilebilen bir kap için. Izgara öğelerinizin genişliğine ve kabınızın toplam genişliğine bağlı olarak daha az veya daha fazla yapmak zorunda kalabilirsiniz.

  2. beyaz boşlukları kaldırmak satır içi blok elemanları arasında (aşağıdaki demoda yazı tipi boyutu tekniğini kullandım ama diğerlerini kullanabilirsiniz) Satır içi blok elemanları arasındaki boşluk nasıl kaldırılır? diğer teknikler için)

  3. sabit kenar boşlukları bloklar arasında

Bir satırdaki blok sayısı, konteynerin boyutuna uyarlanır. text-align özellik varsayılan değere kalmak left Böylece son öğeler sola hizalanır.


Her iki blok ve kap arasında adaptif marjlarla yüzer

= >> DEMO << = (eylemi görmek için sonuç penceresini 750px altında yeniden boyutlandırmanız gerekir)

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}
<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven't written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>

Bu teknik şunları içerir:

  1. yüzer
  2. position:absolute;
  3. :nt-child() css seçici
  4. medya sorguları

Blokları konteynırlarında ortalar ve kabın tüm bloklarının + kenarlarının üst / sol / sıkı / altında aynı marjı verir. Bu çözüm yüzen kullanıldıkça, son satır sola hizalanır.

Bir satırdaki blok sayısı pencerenin genişliğine uyar.


16
2018-05-22 09:45



Bu harika. +1 - Ivan Durst


Değeri için: Şimdi 2017 ve ızgara yerleşim modülü kutunun dışında

* {
    margin:0;
    padding:0;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
}
.block {
  background-color: #ddd;
  border: 1px solid #999;
  height: 100px;
  width: 100px;
}
<div class="container">
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
</div>

(Codepen demosu).

Eğer tarayıcı desteği size uygun - daha sonra ızgara kullanın. Değilse, o zaman okuyun ....


Web-tiki'nin cevabında belirtildiği gibi, CSS ile yapabileceğiniz en iyi şey bir dizi medya sorgusudur.

Eğer söyleniyor ki, eğer LESS gibi bir önişlemci kullanıyorsanız - bu, bu kadar zor veya hataya açık bir görev değildir. (Ancak, evet, CSS hala uzun ve çirkin olacak)

GÜNCEL CODEPEN (Sonuçları görmek için pencereyi yeniden boyutlandırın)

Medya sorgularını kurmak için LESS’ten nasıl yararlanacağınız aşağıda açıklanmıştır:

İlk olarak ihtiyacınız olan tasarıma göre daha az değişken oluşturun:

@item-width:100px;
@item-height:100px;
@marginV: 4px;
@marginH: 2px;
@min-cols:2;
@max-cols:9; //set an upper limit of how may columns you want to write the media queries for

Sonra:

Aşağıdaki gibi bir yineleme karması oluşturun: (Bu kodu http://less2css.org)

.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        .container{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width + 2*@marginH);
}

.loopingClass (@item-width * @min-cols + @min-cols*@marginH*2);

Yukarıdaki mixin, bir dizi medya sorgusunu şu şekilde dağıtacaktır:

@media (min-width: 208px) {
  .container {
    width: 208px;
  }
}
@media (min-width: 312px) {
  .container {
    width: 312px;
  }
}
@media (min-width: 416px) {
  .container {
    width: 416px;
  }
}
@media (min-width: 520px) {
  .container {
    width: 520px;
  }
}
@media (min-width: 624px) {
  .container {
    width: 624px;
  }
}
@media (min-width: 728px) {
  .container {
    width: 728px;
  }
}
@media (min-width: 832px) {
  .container {
    width: 832px;
  }
}

Kalan CSS (LESS) ile:

.container {
  margin: 0 auto;
  text-align: center;
  overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
}
.block {
  background-color: #ddd;
  border:1px solid #999;
  box-sizing:border-box;
  float: left;
  height: @item-height;
  width: @item-width;
  margin:@marginV @marginH;
}

... istediğiniz sonucu elde edersiniz.

... ve düzeni özelleştirmek için çok kolay:

Tek yapmam gereken, LESS miksinde kullandığım değişkenleri, ihtiyaçlarıma göre değiştirmek.


9
2018-05-22 11:37



Yaratıcılık için +1. Yine de pek çok medya sorgusunu kabul etmekte zorlanıyorum - Ivan Durst
Ben sadece yazıya bir css ızgara çözümü ekledi :) - Danield


Flexbox, bazı sözde elemanlar, ekstra bir div ve çok fazla hayal kırıklığı yaşadıktan sonra bunu medya sorguları olmadan gerçekleştirebildim (ızgaramı birçok farklı boyuttaki öğeye yerleştirmem gerektiğinden, medya sorguları benim için işe yaramazdı) .

Bir uyarı: öğeler arasındaki oluklar sıvıdır.

Demo: http://codepen.io/anon/pen/OXvxEW

CSS:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #ffc0cb;
    max-width: 1100px;
    margin: 0.5rem auto;
    justify-content: center;
}

.wrapper:after {
    content: ' ';
    flex: 1;
    height: 100%;
    border: 1px solid #00f;
    margin: 0.5rem;
}

.child {
    flex: 1;
    border: 2px solid #ffa500;
    min-width: 300px;
    margin: 0.5rem;
    text-align: center;
}

.child-contents {
    width: 300px;
    border: 2px solid #008000;
    height: 100px;
    margin: 0 auto;
}

HTML:

<div class='wrapper'>
    <div class='child'>
        <div class='child-contents'></div>
    </div>
    <div class='child'>
        <div class='child-contents'></div>
    </div>
    <div class='child'>
        <div class='child-contents'></div>
    </div>

    ...etc., more .child's...

</div>

Son sonuç, yeşil dikdörtgenlerin div olduğu, bunun gibi bir şeydir. Pembe / turuncu kenarlıklar sadece referans içindir, böylece neler olduğunu görebilirsiniz. Pembe / turuncu sınırları kaldırırsanız, aradığınız ızgarayı almalısınız (yine de, oluk sıvısı olduğunu unutmayın).

enter image description here


2
2017-07-21 09:48



Zamanım olduğunda buna daha çok bakacağım, ama bir şeylere bağlı olabilirsiniz. (Safari 9.1'de kırılmış olsa da) - Ivan Durst


Flexbox kullan:

.container {
  display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: inline-block;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

Bitti.


1
2018-04-06 18:33



Teşekkürler şahin. Bununla ilgili sorun, tüm blok kümesinin sola hizalanmasıdır. içeride konteynerin, yani konteynerin içinde bazı boyutlarda sağ tarafta garip bir beyaz marjı olacaktır (bu kaleme bakınız ve pencereyi yeniden boyutlandırınız: codepen.io/anon/pen/pvXoEZ). Bunu ile düzeltebilirsiniz justify-content: center;Ancak altta yer alan bloklar orjinal problem olan ilk sütunla hizalanmamış olarak merkez hizalanacaktır. Ayrıca IE9 + 'yu desteklemeye çalışıyordu, ancak yine de bir flexbox çözümü görmeyi çok isterdim. Yakınlaşmak! - Ivan Durst
@IvanDurst ekleyebilirsiniz flex-grow: 1; için .block - hawkeye126
@ hawkeye126, eklerseniz flex-grow:1 için .block Son satırdaki blokları yeniden boyutlandırıyorsunuz ki, @IvanDurst'ün istediği gibi değil. - Gabriel Kohen
@GabrielKohen doğrudur - blokları tek tek yeniden boyutlandırmak istemiyoruz, sabit bir boyuttadır. - Ivan Durst


Bugüne kadar, bunun için tek temiz çözüm ile

CSS Izgara Düzeni Modülü (Codepen demosu)

Temel olarak gerekli olan kod şu şekildedir:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fill, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: center; /* (4) */
  align-content: flex-start; /* (5) */
}

1) Konteyner elemanını ızgara kabı yapın

2) Izgarayı, 120px genişlikteki 'otomatik' sütunlarla ayarlayın. (Otomatik dolgu değeri, duyarlı düzenler için kullanılır).

3) Izgara satırları ve sütunları için boşlukları / olukları ayarlayın.

4) ve 5) - flexbox'a benzer.

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-gap: 1rem;
  justify-content: center;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Codepen demosu (Efekti görmek için yeniden boyutlandırın)


Tarayıcı Desteği - Kullanabilirmiyim

Şu anda IE ve Edge'den kısmi destek sağlayan Chrome (Blink) ve Firefox tarafından desteklenmektedir (Bkz. bu gönderi yazan Rachel Andrew)


CSS ızgaraları hakkında daha fazla okuma:


1
2018-03-26 13:21





Sorununuz için "normal" bir çözüm yoktur, ancak yalnızca bahsedilen "geçici çözümler".

Durum şu ki, blok konteyneriniz mevcut alanı maksimum kullanılabilir / kurulum seviyesine kadar dolduracak ve ardından tüm iç blokları bir sonraki satıra bölebilir ve bu da konteynerin taşmasına neden olacaktır. Ayrıca, yüzen gibi diğer yapılandırmalarda da aynı davranış olacaktır. Oluşturmanın işleyiş biçimi budur - uzayda her zaman içsel davranışları hesaplamak için açgözlüdür.

Belki gelecek Flexboxes Bunu mümkün kılacak - ama tüm özellikleri okumamıştım. Sadece bir tahmin...


0
2018-05-22 12:51



Teşekkürler Mohre, haklı olabilirsin. FYI bu bir yorum olmalı, bir cevap değil. - Ivan Durst


Bunu basit css ile deneyin:

CSS:

.Row {metin hizalama:; yazı tipi boyutu: 0;} .block {metin hizalama:; görüntü: sıralı blok, genişlik: 150px; yükseklik: 15 piksel; marjı: 5px; kenarlık: 1px katı #dddddd; yazı tipi boyutu: 13px;}

HTML:

<div class="row">
  <div class="block"></div> 
</div>

.row{text-align:center;font-size:0;}
    .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;}
<div class="row">
      <div class="block">1</div> 
      <div class="block">2</div> 
      <div class="block">3</div> 
      <div class="block">4</div> 
      <div class="block">5</div> 
      <div class="block">6</div> 
      <div class="block">7</div> 
      <div class="block">8</div> 
    </div>


0
2018-06-15 08:17



Öğeler konteynerde ortalanmış değil - hizalanmışlar. Marjın sol ve sağ tarafta aynı olması gerekiyor. - Ivan Durst
Herhangi bir sorun görmüyorum lütfen daha fazla detay verin. Kenar boşluğu sorununu düzenledim. - Rakesh Vadnal
Öğelerin konteynırda ortalanması gerekiyor, şu anda hizalanmış durumdalar. Soruyu tekrar okuyun :) - Ivan Durst
@Ivan Durst, Şimdi kontrol et, metne hizala: orta; satırda. - Rakesh Vadnal