Центр H4 в делении без разрыва строки

0

У меня есть следующий код:

<div style="border: 1px solid rgba(51, 51, 51, 0.4); background: rgba(51, 51, 51, 0.1); padding: 10px;">
    <span>Test</span>
    <h4 class="heading" style="text-align: center;">
        <a href="bitcoin:1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3">1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3</a>
    </h4>
</div>

Это дает мне этот результат: https://dl.dropboxusercontent.com/u/37289435/prob-1.png

Я хочу "Test" и ссылку "1Dxit.." в одной строке, но "Test" на левом сайте и ссылку в центре. Когда я добавляю "display: inline;" к тегу h4, он дает мне этот результат: https://dl.dropboxusercontent.com/u/37289435/prob-2.png

Он встроен, но ссылка больше не сосредоточена. В чем проблема и как я могу это исправить?

Теги:

3 ответа

1

добавьте это в свой css:

h4{
display:inline-block;
}
1

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

Что-то вроде этого:

http://jsfiddle.net/smnpL/

  • 0
    Мои поля "заголовка" удаляют поля, но вещь -margin слишком проста, чтобы быть очевидной. Благодарю.
  • 0
    Нет, это не потому, что "маржа" ... если вы сделаете это, ваша страница будет не очень отзывчивой. Размещать объекты попиксельно (-29px) - плохой метод, потому что его трудно обслуживать. FYI <span> - встроенный элемент, <h*> - блочный элемент. Я сделаю это следующим образом: jsfiddle.net/smnpL/2
Показать ещё 5 комментариев
0

См. Демо:

http://jsbin.com/becit/1

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .b {
        display:table;
        width:100%;
    }
    .b span {
        display:table-cell;
        vertical-align:middle;
        padding: 10px 5px 10px 10px;
    }
    .b h4 {
        padding: 10px 10px 10px 5px;
        word-break:break-all;
    }
    </style>

</head>

<body>

    <div class="b" style="border: 1px solid rgba(51, 51, 51, 0.4); background: rgba(51, 51, 51, 0.1);">
        <span>Test</span>
        <h4 class="heading" style="text-align: center;">
            <a href="bitcoin:1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3">1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3</a>
        </h4>
    </div>

</body>

</html>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню