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

Question

Не может центрировать текст вертикально со ссылкой, это мой HTML-код:

<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;"> 
    <p style=""> 
     Text <br /> 
     <a href="#"> 
      Link 
     </a> 
    </p> 
</div> 

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

jsfiddle: http://jsfiddle.net/85q6wqjx/

Answer 1

Вы можете реализовать эту схему следующим образом.

Во-первых, установите display: inline-block на p, таким образом вы можете выровнять его с помощью базовой линии содержимого.

Во-вторых, вам необходимо сбросить line-height в пределах p до некоторого разумного значения , чтобы получить межстрочный интервал, чтобы посмотреть вправо.

В-третьих, примените vertical-align: middle к элементу p, чтобы он имел желаемый эффект.

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

См скрипку: http://jsfiddle.net/audetwebdesign/1mwkbr0q/

.panel { 
 
    background:#F7C0B9; 
 
    width:645px; 
 
    height:170px; 
 
    margin:0 auto; 
 
    outline:1px solid #FFF; 
 
    text-align:center; 
 
    line-height: 170px; 
 
} 
 
.panel p { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    border: 1px dotted gray; 
 
    line-height: 1.25; 
 
}

<div class="panel"> 
 
    <p>Text<br /> <a href="#">Link<br>a 3rd line for example</a></p> 
 
</div>

Answer 2

Пожалуйста, удалите <br> тег, вы получите то, что вы хотите

и обновить фрагмент кода с

<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;"> 
      <p style="margin: 0;">Text</p> 
      <a href="#">Link</a> 

     </div> 

http://jsfiddle.net/85q6wqjx/10/

Answer 3

Если вы хотите ссылку под текст, но все же оба в середине:

<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align:center;vertical-align: middle;"> 
    <p style="display:inline-block;"> 
    Text <br /> 
     <a href="#"> 
     Link 
     </a> 
    </p> 
</div> 

JsFiddle

Ваш line-height толкал его вне div и p является блок-элемент был остановить его от идти под. Вам нужно было сделать p элемент inline-block.

---

Если вы хотите, чтобы они оба на той же строке, удалить <br> из HTML.

JsFiddle

br является разрыв строки и line-height эффекты от этого.

Answer 4

Использование дисплея: таблица и дисплей: таблица-ячейка.

http://jsfiddle.net/uu92ddsq/

.centerthis { display: table; } 
.centerthis p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Answer 5

Просто добавьте следующий код в файл CSS

a { 
    margin-top: -8%; 
    display: block; 
} 

отдавания класс/имя идентификатор тега привязки, если вы хотите добавить стиль конкретная анкерная бирка