4

Existe algum estilo próprio no CSS ou tag HTML onde consigo o efeito como mostrado na imagem abaixo?

inserir a descrição da imagem aqui

Seria um aside com uma borda de 1px e a palavra "Realização" centralizada sobre a borda superior, mas que a borda por baixo do texto não apareça, conforme a imagem.

Existe algo no CSS ou HTML que faça isso de forma automática?

Código que tenho:

/* estilos apenas como exemplo,
para mostrar o fundo preto e o texto centralizado*/
body{
   background: #000;
   color: #fff;
   text-align: center;
}
<aside class="realiza"> 
   <p>Realização:</p>
   Qualquer texto aqui
</aside>

9
  • Se tu não sabe, quem é que vai saber? : )
    – user60252
    Commented 31/05/2018 às 20:51
  • isso aqui > jsfiddle.net/daRch já é um começo!!
    – user60252
    Commented 31/05/2018 às 21:07
  • 1
    Não estará à procura da etiqueta <fieldset> ?
    – Isac
    Commented 31/05/2018 às 21:24
  • Quase chego lá, só faltou uma borracha nas bordas laterais que estão passando pra cima da borda horizontal superior. jsfiddle.net/s0b5auqs
    – user60252
    Commented 31/05/2018 às 21:37
  • Você colocou aside, isso atrapalhou
    – user60252
    Commented 31/05/2018 às 21:38

2 Respostas 2

3

A etiqueta <fieldset> permite criar essa caixa com contorno à volta, e a etiqueta <legend> que fica dentro define o que aparece no topo como "titulo".

Veja o exemplo:

/* estilos apenas como exemplo,
para mostrar o fundo preto e o texto centralizado*/
body{
   background: #000;
   color: #fff;
   text-align: center;
}
<fieldset class="realiza"> 
   <legend>Realização:</legend>
   Qualquer texto aqui
</fieldset>

1

Se for num aside ...

body{
   background: #000;
   color: #fff;
}


.realiza{
  text-align: center;
  border: 1px solid #ddd;
  margin-top: 30px;
  position: relative;

  

}

.realiza div {
  width: 100%;
  position: absolute;
  line-height: 20px;
  height: 20px;
  top: -10px;
  left: 0;

}

.realiza div span{
   background: #000;
  padding: 0 15px;
  color:#fff;
}
<div class="div"><aside class="realiza">
   <div><span>Realização:</span></div>
   <p>Qualquer texto aqui</p>
</aside></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .