Выровнять текст по центру с закругленной рамкой - PullRequest
Новая
       39

Выровнять текст по центру с закругленной рамкой

0 голосов
/ 28 мая 2020

Я хочу создать закругленную границу и поместить текст в середине верхней границы, например:

enter image description here

Я попытался изменить решение, опубликованное на в предыдущем вопросе , но мне не удалось добиться, чтобы нижняя граница текста совпадала с границей div ниже (в приведенном ниже фрагменте используется попутный ветер css, но вы получаете идея): 

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="pt-3">
  <h2 class="w-full text-center border-t rounded-t-lg border-gray-600" style="line-height: 0.1">
    <span class="bg-white px-3 text-sm font-medium">SOME TEXT</span>
  </h2>
  <div class="px-5 pb-5 pt-4 border-b border-r border-l border-gray-600 rounded-md">
  </div>
</div>

Как я могу выполнить sh это?

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Если вы хотите использовать только HTML и CSS, вы можете сделать это следующим образом: 

div {
  height: 60px;
  width: 200px;
  border: 2px solid black;
  border-radius: 10px;
}

h3 {
  width: 35px;
  margin-top: -10px;
  margin-left: 80px;
  background: white;
  padding:0px 2px;
}
<div>
    <h3>Text</h1>
</div>
0 голосов
/ 28 мая 2020

Ваш диапазон уже скрывает границу, оставьте ее в контейнере и удалите из заголовка. 

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="pt-3">
  <h2 class="w-full text-center" style="line-height: 0.1">
    <span class="bg-white px-3 text-sm font-medium">SOME TEXT</span>
  </h2>
  <div class="px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md">
  </div>
</div>
...