Satır içi blok merkezini hizalama

Satır içi blok öğeyi hizalamanın en kolay yolu ne olurdu?Satır içi blok merkezini hizalama

İdeal olarak, elemanlara genişlik ayarlamak istemiyorum. Bu şekilde, elemanlar içinde girilen metne bağlı olarak, satır içi blok elemanı, CSS içindeki genişliği değiştirmeye gerek kalmadan yeni genişliğe genişleyecektir. Satır içi blok elemanları, elemanın içindeki metnin yanı sıra birbirinin üzerine (yan yana değil) ortalanmalıdır.

Aşağıdaki kodlara bakın veya bkz. jsFiddle.

geçerli HTML:

<div> 
    <h2>Hello, John Doe.</h2> 
    <h2>Welcome and have a wonderful day.</h2> 
</div>

mevcut SCSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 

body { 
    margin: 0 auto; 
    background: rgba(51,51,51,1); 
    font-family: 'Open Sans', sans-serif; 
} 

div { 
    width: 100%; 
    height: auto; 
    margin: 15% 0; 
    text-align: center; 
    h2 { 
     margin: 0 auto; 
     padding: 10px; 
     text-align: center; 
     float: left; 
     clear: left; 
     display: inline-block; 
     &:first-child { 
      color: black; 
      background: rgba(255,255,255,1); 
     } 
     &:last-child { 
      color: white; 
      background: rgba(117,80,161,1); 
     } 
    } 
}

iki eleman arasında bir br ekleme ve şamandıra yaptırmayı: açık/sol: en kolay yolu olabilir sol; Ancak, bunun hakkında başka bir yol varsa merak ettim.

kaynak

2014-10-30 Andrew

olası bir kopyası [Bir satır içi elemanın merkezlenmesi mümkün mü ve eğer öyleyse, nasıl yapılır?] (Http://stackoverflow.com/questions/7601678/is-it-possible-to-center-an-inline -block-element-and-if-so-how) –

Bunu beğendiniz mi? http://jsfiddle.net/bcL023ko/3/ Öğeyi ortalamak için float:left sol tarafını kaldırıp margin: 0 auto ekleyin. Yoksa aradığın başka bir şey mi?

kaynak

2014-10-30 16:11:11

Ebeveyn “text-align: center”, satır içi satır öğeleriyle ise, http:// 'margin: 0 auto' kullanılmasına gerek yoktur. /jsfiddle.net/bcL023ko/4/ –

@ k-somun Yan yana değil, üst üste istiflenecek elemanlar arıyorum. – Andrew

@ k-somun Öğelerin üst üste istiflenmesini istiyorum. – Andrew

cevap

İlgili konular