Вертикально выровненный якорный текст?

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

В основном, я пытаюсь сделать привязку с {display: block;} с заданной высотой и шириной и иметь текст вертикально и по горизонтали.

Сейчас это мой css

.logo
{
    width:140px;
    height:75px;
    border-right:1px dotted black;
    border-bottom:1px dotted black;
    float:left;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}

.logo a
{
    display:block;
    width:140px;
    height:75px;
    background-color:#fff;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}
/*the reason for the double declaration of text information is because
  some of the logo divs do not have anchors in them, and it for uniformity
  purposes.
*/

.logo a div
{
    margin-top:10px;
}

а затем html будет

<div class="logo"><a href="#"><div>my link</div></a></div>

Теперь причина, по которой я вставил div внутри якоря, состоит в том, что я думал, что это будет хороший способ отделить текст от фактического блока, но с настройкой этого поля он перемещает якорь вместо простого текста. Атрибут vertical-align не имеет ничего общего, и я не понимаю, что делать. Любые предложения или идеи перестройки были бы замечательными. Спасибо.

образец можно найти на http://www.dsi-usa.com/test/clientele.php, не стесняйтесь просматривать сайт, на котором все еще предстоит проделать большую работу, повторно закодированы. Во всяком случае, этот образец именно то, что я хочу, просто нужно, чтобы текст также был выровнен по вертикали.

Ответы

Ответ 1

У вас не может быть <div> внутри <a>, это недействительный HTML. Вместо этого используйте <span> вместо display: block;.

Обновление:

Как и в HTML5, теперь вы можете иметь div внутри якоря (или любого элемента уровня блока).

Чтобы это было законным, вы должны использовать doctype HTML5:

<!DOCTYPE html>

Ответ 2

Если вы установили высоту строки для содержащего окна (ваш якорь - просто выровняйте внутренний div, вам он не нужен), равный его высоте, тогда одна строка текста будет вертикально центрирована. Если вам требуется обертка строк, она становится более сложной.

Здесь скрипка с одним элементом привязки для демонстрации более простого сценария: http://jsfiddle.net/vdkAb/1/

UPDATE
... и если вам не нужно беспокоиться о поддержке IE6/7 (вам повезло!), вы можете использовать display: table-cell, и он работает без усилий - без указания высоты строки - даже с несколькими строками, например: http://jsfiddle.net/PH5Yw/

Ответ 3

Это обычно работает для меня

$(function(){
    
    $("button").click(function(){
        $(".navbar").toggleClass("large");
    });
    
});
*{
    box-sizing: border-box;
}

.navbar{
    display: flex;
    color: white;
    background: black;
    height: 30px;
    margin-bottom: 10px;
    transition: all 0.25s ease;
}

.navbar.large{
    height: 120px;
}

a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
    padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a>TITLE</a>
    <a>Contact</a>
    <a>About Us</a>
</div>
<button>Change Nav Size</button>