7

Preciso utilizar um texto centralizado na página e entre duas linhas horizontais em todas títulos do projeto, conforme abaixo:

inserir a descrição da imagem aqui

O texto do título possui magin: 0 35px, é dinâmico e as linhas horizontais devem aumentar ou diminuir de acordo.

3 Respostas 3

7

Existem algumas maneiras de se fazer isso, uma delas seria com fieldset, exemplo

fieldset {
   border-top: 1px solid #333;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: block;
    text-align: center;
}

fieldset legend {
    padding: 5px 10px;
}
<fieldset class="Produtos">
    <legend>Produtos</legend>
</fieldset>

Outra maneira seria com uma div e span

div.titulo {
  height: 1px;
  background-color: #333;
  text-align: center;
}
div.titulo span {
  background-color: white;
  position: relative;
  top: -0.5em;
  padding: 0 10px;
}
<div class="titulo">
  <span>
    Produtos
  </span>
</div>

6

Quase tudo sobre texto entre linhas:

/**
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/topic/css-trick-for-a-horizontal-type-line-behind-text/#post-151970
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 */
h2 {
  font: 33px sans-serif;
  margin-top: 30px;
  text-align: center;
  text-transform: uppercase;
}
h2.background {
  position: relative;
  z-index: 1;
}
h2.background:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */

  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */

  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
h2.background span {
  /* to hide the lines from behind the text, you have to set the background color the same as the container */
  background: #fff;
  padding: 0 15px;
}
h2.double:before {
  /* this is just to undo the :before styling from above */

  border-top: none;
}
h2.double:after {
  border-bottom: 1px solid blue;
  -webkit-box-shadow: 0 1px 0 0 red;
  -moz-box-shadow: 0 1px 0 0 red;
  box-shadow: 0 1px 0 0 red;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */

  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  width: 95%;
  z-index: -1;
}
h2.no-background {
  position: relative;
  overflow: hidden;
}
h2.no-background span {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  position: relative;
  padding: 0 20px;
}
h2.no-background span:before,
h2.no-background span:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px solid red;
}
h2.no-background span:before {
  right: 100%;
}
h2.no-background span:after {
  left: 100%;
}
h2.no-span {
  display: table;
  white-space: nowrap;
}
h2.no-span:before,
h2.no-span:after {
  border-top: 1px solid green;
  content: '';
  display: table-cell;
  position: relative;
  top: 0.5em;
  width: 45%;
}
h2.no-span:before {
  right: 1.5%;
}
h2.no-span:after {
  left: 1.5%;
}
<!-- content to be placed inside <body>…</body> -->

<!-- In this example, the text will appear to have a strikethrough -->
<h2 class="background">Strikethrough title</h2>

<!-- We can get rid of the strikethrough look by adding a span tag and applying a background color to the span. Applying a background to the h2:after won't work because it won't adjust and hug the text. -->
<h2 class="background"><span>Line-behind title</span></h2>

<!-- We can achieve a double-lined strikethrough by adding a box-shadow to the tag. You could probably also just use a top & bottom border, then position both. -->
<h2 class="background double"><span>Double-lined title</span></h2>

<!-- This method doesn't need a <span> or background color. Source: http://css-tricks.com/forums/topic/css-trick-for-a-horizontal-type-line-behind-text/#post-138193 -->
<h2 class="no-background"><span>Line-behind title <b>(no bg)</b></span></h2>

<!-- My new preferred choice... this method doesn't need a <span>. Source: http://css-tricks.com/forums/topic/css-trick-for-a-horizontal-type-line-behind-text/#post-132492 -->
<h2 class="no-span">Line-behind title <b>(no span/no bg)</b></h2>

FONTE

-2

Uma forma que encontrei a solução.
Com certeza há várias formas de se fazer.

<div class="content">
  <hr>
  or
  <hr>
</div>
  1. Criação da div com class="content".
  2. Tag <hr> para criar a linha.
  3. O título
  4. Tag <hr> para criar a linha.
.content {   
  width: 400px;
  
  display: flex;
  align-items: center;
  gap: 5px;
}
hr {
  width: 100%;
}
  1. Limitei a div content com (largura)width: 400px;
  2. Defini o div com `display: flex;
  3. Alinhei todos os itens ao centro
  4. Defini o espaçamento entre eles com gap: 5px;
  5. Defini o valor de largura das linhas conforme o tamanho da div pai.

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 .