How do i achieve a title in the middle of a border with HTML and CSS

Question

I have a grid layout:

#price {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-gap: 3vw;
}

And cant seem to find a way to make a responsive title like element like the one containing "lorem" below.

Let us see what you've managed so far, HTML and CSS, so we can guide you towards a solution. — chriskirknielsen, Mar 17 '20 at 20:13
Well i haven't managed anything other than trying position relative, and then just guessing with the minus on top, but that doesn't make it responsive — William Dam, Mar 17 '20 at 20:15
@Lal will you post your answer as a solution, so i can flag it as the solution :) — William Dam, Mar 17 '20 at 20:18

score 2 · Accepted Answer · answered Mar 17 '20 at 20:21

2

For achieving such a functionality, I would suggest you to check the HTML fieldset and legend. As specified in the docs

The <fieldset> element provides a grouping for a part of an HTML form, with a nested <legend> element providing a caption for the <fieldset>.

You can then style the fieldset and legend using CSS to obtain the expected result.

answered Mar 17 '20 at 20:21

Lal

14,726
4
45
70

1

Thanks! And to those wondering margin: auto, will center – William Dam Mar 17 '20 at 20:25

score 1 · Answer 2 · answered Mar 17 '20 at 20:36

html center is hacky but wasnt what i was showing....

showing that

fieldset and legend is probably the best use here.

    <fieldset>
    <legend>monster</legend>
    <center>
      <h2>Lorem ipsum</h2>
    </center>
  </fieldset>

fieldset{
    border: 1px solid #74D5EB;
    font-weight: bold;
}

legend {
    border: 1px solid #74D5EB;
    padding: 3px 6px;
    margin:auto;
    border-radius: 15px;
}

How do i achieve a title in the middle of a border with HTML and CSS

2 Answers2