Текст в DIV застрял в нижней части

Question

Текст в DIV застрял в нижней части

0

У меня запуталась странная проблема. То, что я пытаюсь достичь, это кнопка "растянутая алмазная форма". Это форма, которая начинается с треугольника, затем имеет расширенный прямой средний и другой треугольник в конце. Для этой формы я придумал следующий CSS:

#button-medium {
    height: 30pt;
    position: relative;
    display: inline-block;
    background-color: #ff7e39;
}
#button-medium:before {
    content:"";
    position: relative;
    display: inline-block;
    border-bottom: 15pt solid transparent;
    border-right: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-left: -15pt;
}
#button-medium:after {
    content:"";
    position: relative;
    display: inline-block;
    border-bottom: 15pt solid transparent;
    border-left: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-right: -15pt;
}

Это создает форму, которую я ищу, и она даже распространяется на контент. Все хорошо и хорошо. Моя проблема в том, что когда я хочу использовать эту форму с некоторым текстом. Текст застрял в нижней части диапазона или div, которые я использую! Я попробовал отступы, пометить другие div внутри и ничего не работает. Это мой HTML

<!DOCTYPE html>
<html>
<head>
    <title>&deg;</title>
    <link href="css/52Noord.css" rel="stylesheet">
</head>
<body>
<div align="center"><div id="button-medium"><span style="padding-bottom: 3pt">The Text</span></div></div>
</body>
</html>

Любая идея, как достичь такой формы и иметь в ней центрированный (вертикальный и горизонтальный) текст?

Вот JSFiddle.

Deddiekoel 18 фев. 2014, в 15:17

Источник

0

Обычно хорошей идеей является добавление jsfiddle к проблемам, связанным с html / css jsfiddle.net
Xyzk 18 фев. 2014, в 13:48

Теги:

html

css

1 ответ

Ещё вопросы

Обычно хорошей идеей является добавление jsfiddle к проблемам, связанным с html / css jsfiddle.net

EmileKumfa · Accepted Answer · 2014-02-18T12-02-00.000Z

Вам в основном нужно изменить position:relative в :before и :after to floats. Затем укажите line-height для содержимого в пределах span

Обновлен CSS:

#button-medium span {
    line-height: 40px;
}
#button-medium:before {
    content:"";
    float: left;
    border-bottom: 15pt solid transparent;
    border-right: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-left: -15pt;
}
#button-medium:after {
    content:"";
    float: right;
    border-bottom: 15pt solid transparent;
    border-left: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-right: -15pt;
}

Демо: http://jsfiddle.net/L8gRw/

Отлично, это полностью сработало. Но я переместил высоту строки в # button-medium, чтобы мне не понадобился дополнительный диапазон!