У меня есть следующий код:
<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
Он встроен, но ссылка больше не сосредоточена. В чем проблема и как я могу это исправить?
добавьте это в свой css:
h4{
display:inline-block;
}
Элемент H4
имеет поля, прикрепленные к нему по умолчанию. Вам нужно будет не только удалить верхнее поле на H4
, но и дать ему отрицательный запас, равный высоте линии пролета.
Что-то вроде этого:
См. Демо:
<!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>
<span>
- встроенный элемент,<h*>
- блочный элемент. Я сделаю это следующим образом: jsfiddle.net/smnpL/2