Вертикально выровнять текст до середины встроенного блока

-2

Я пытаюсь получить текст, чтобы выровнять по вертикали до середины, но, похоже, не может заставить его работать.Вертикально выровнять текст до середины встроенного блока

HTML:

<div class="row"> 
    <div class="col-md-4"> 
     <a href="#" class="custom-button width-100">Login</a> 
    </div> 
    <div class="col-md-4"> 
     <a href="#" class="custom-button width-100">Menu</a> 
    </div> 
    <div class="col-md-4"> 
     <a href="#" class="custom-button width-100">Contact</a> 
    </div> 
</div>

CSS:

.custom-button { 
color:#ECDBFF; 
background-color:#4F0100; 
display:inline-block; 
height: 220px; 
font-family:Verdana, Geneva, sans-serif; 
font-size:20px; 
font-weight:bold; 
text-align:center; 
text-decoration:none; 
} 

.width-100 {width: 100%;}

How it looks at the moment

Я гугле совсем немного и попробовал несколько вещей, но я не могу показаться, чтобы получить текст Идите к середине. может кто-нибудь посоветует, что мне нужно будет добавить/изменить, чтобы заставить это работать.

источник

2015-02-25 Neil

Вы должны искать этот сайт вместо размещения первых, как этот вопрос был задан бесчисленное количество раз. – Ruddy

Я искал сайт! все ответы, которые я нашел, похоже, используют вертикальное выравнивание, которое я не мог заставить работать. Задавать вопрос здесь всегда в последнюю очередь. Ваше предположение, что я не искал ответа, неверно. – Neil

Да, я могу сказать, что вы обыскали сайт. [Потому что это явно не отвечает на ваш вопрос вообще с одним и тем же названием] (http://stackoverflow.com/questions/10437643/vertical-align-middle-on-an-inline-block-anchor-tag) ..... Как я уже сказал, его непросто сделать быстрый поиск. Я обнаружил, что менее чем за 1 минуту поиска. – Ruddy

Если у вас есть текст, который ограничен одной строкой, то line-height будет лучшим решением.

попробовать с этим

line-height:220px; /*height of your container */

JsFiddle Demo

источник

2015-02-25 14:17:26 Sachin

спасибо! Это сработало – Neil

избранное решение, поскольку оно поддерживается на большинстве устройств. –

Вы можете также использовать vertical-align псевдо элемент (:before или :after) и дополнительную коробку (inline-block), чтобы позволить содержание завернуть на несколько строк: см. ниже и снимите сниппет.

.custom-button { 
 
    color: #ECDBFF; 
 
    background-color: #4F0100; 
 
    display: inline-block; 
 
    height: 220px; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 
.width-100 { 
 
    width: 100%; 
 
} 
 
.custom-button:before { 
 
    display:inline-block; 
 
    content:''; 
 
    height:220px; 
 
    vertical-align:middle; 
 
    margin:-0 -0.25em;; 
 
    } 
 
a span {display:inline-block; 
 
    vertical-align:middle; 
 
    }

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> 
 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/> 
 
<div class="row"> 
 
    <div class="col-md-4 col-xs-4"> 
 
    <a href="#" class="custom-button width-100">Login</a> 
 
    </div> 
 
    <div class="col-md-4 col-xs-4"> 
 
    <a href="#" class="custom-button width-100">Menu</a> 
 
    </div> 
 
    <div class="col-md-4 col-xs-4"> 
 
    <a href="#" class="custom-button width-100"><span>Cont<br/>act</span></a> 
 
    </div> 
 
</div>

источник

2015-02-25 14:33:20

Вертикально выровнять текст до середины встроенного блока

ответ

Смежные вопросы