Impostare la larghezza elemento posizionato assoluto al suo contenuto (è solo un testo)

Question

Ho intenzione di costruire questo

Questo è il mio codice HTML

<div class="al-head-container"> 
    <div></div> 
    <span>Center Websites</span> 
</div> 

Questo è css:

.al-head-container{ 
    margin: auto; 
    width: 100%; 
    padding:0 4%; 
    position: relative; 
    box-sizing: border-box; 
} 

.al-head-container > span{ 
    font: 2.1em titr; 
    color: #ae7f00; 
    background-color: #FFFFFF; 
    position: absolute; 
    right: 0; 
    left:0; 

} 
.al-head-container > div{ 
    width: 100%; 
    height: 20px; 
    background-image: url("../image/head-line.jpg"); 
    position: relative; 
    top: 25px; 
} 

Ma questo è il risultato del codice

Il problema è la larghezza span è impostata al 100% e la sua larghezza non si adatta al suo contenuto. è quello che ottengo dalla piromane

Come si vede il testo copre l'DIV che contiene la linea.

Ho provato a impostare il display:inline-block per span ma non è cambiato nulla. Come posso rendere la larghezza di span posizionata in assoluto per adattarla al contenuto?

Answer 1

Perché non compiere questo puramente in CSS con un unico elemento:

div { 
 
    border-top:1px solid lightgrey; 
 
    border-bottom:3px solid lightgrey; 
 
    height:2px; 
 
    position:relative; 
 
    margin-top:15px; 
 
} 
 
div:after { 
 
    content:attr(data-label); 
 
    position:absolute; 
 
    top:-10px; 
 
    left:50%; 
 
    padding:0 20px; 
 
    display:inline-block; 
 
    background:#fff; 
 
    transform: translateX(-50%); 
 
    text-align:center; 
 
    color:#A37716; 
 
    font-size:24px; 
 
}

<div data-label="Center Websites"></div>

Answer 2

io suggerisco fare alcuni cambiamenti sul vostro codice.

• È possibile rimuovere l'elemento div e di utilizzare invece un pseudo-element più tardi con i CSS

  <div class="al-head-container"> 
      <span>Center Websites</span> 
  </div> 
  

• Poi con i CSS rendono lo pseudo-elemento essere quello assoluto per posizionarlo dietro l'arco:

  .al-head-container{ 
      position:relative; 
  } 
  .al-head-container > span{ 
      font: 2.1em titr; 
      position:relative; 
      z-index:10; 
      display:inline-block; 
      padding:0 20px; 
      height:2.1em; 
      line-height:2.1em; 
      color: #ae7f00; 
      background-color: #FFFFFF; 
  } 
  .al-head-container:after{ 
      content:""; 
      width: 100%; 
      top:50%; 
      transform:translateY(-50%); 
      border-top:dotted 3px red; 
      position: absolute; 
      left:0; 
  } 
  

Selezionare questa Demo on Jsfiddle

---

_{Si noti che è possibile sostituire il confine sul violino l'immagine di sfondo con}

Answer 3

tenta di aggiungere automaticamente il margine sulla durata assoluta

.al-head-container > span{ 
    font: 2.1em titr; 
    color: #ae7f00; 
    background-color: #FFFFFF; 
    position: absolute; 
    right: 0; 
    left:0; 
    margin : auto; 
} 

Answer 4

Prova questo:

.fancy { 
 
    line-height: 0.5; 
 
    text-align: center; 
 
} 
 
.fancy span { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.fancy span:before, 
 
.fancy span:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 5px; 
 
    border-bottom: 3px solid gray; 
 
    border-top: 1px solid gray; 
 
    top: 0; 
 
    width: 600px; 
 
} 
 
.fancy span:before { 
 
    right: 100%; 
 
    margin-right: 30px; 
 
} 
 
.fancy span:after { 
 
    left: 100%; 
 
    margin-left: 30px; 
 
}

<div class="subtitle fancy"> 
 
    <span>Center Websites</span> 
 
</div>

Anche qui si ha una lavorando fiddle