vertical-align:</p> <p><img src="https://i.stack.imgur.com/Yru7c.png" alt="layout"></p> <p><strong>Benim CSS</strong>: düğme

Question

metin orta bu düzen

body { 
    background: #e2eaed; 
} 
a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 30px; 
    height: 62px; 
    line-height: 62px; 
    /* vertical-align: middle is not works */ 
    background: #8dc73f; 
    width: 132px; 
    padding: 0 25px; 
    font-size: 16px; 
    text-align: center; 
    font-weight: bold; 
    margin-left: 4px; 
    display: block; 
    float: left; 
} 

düğmesi 1 satır metin, benim kod işleri sahip olduğunda iyi. Ancak, düğmenin yukarıdaki resimde olduğu gibi 2 satırlık metinleri olduğunda. Kod metni büyük bir boyuta sahiptir, çünkü line-height özelliğini kullanıyorum. vertical-align'u denedim ama çalışmıyor.

Lütfen bkz. jsfiddle.

Answer 1

Dikey hizalama, yalnızca tablo hücreleri (veya satır içi bloklar olarak görünen ancak daha sonra farklı olan) olarak görüntülenen öğeleri etkiler. Bu elemanlar sulanmamalıdır.

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

    /* Reset */ 
    float: none; 
    line-height: normal; 
} 

Answer 2

başka yöntem flexible boxes kullanarak olurdu:

a { 
    display: inline-flex; 
    align-items: center; /* cross axis */ 
    justify-content: center; /* main axis */ 

    line-height: 1; /* reset */ 
} 

Sen eklerler browser support ve fiddle görmeyi gerekebilir.