web-dev-qa-db-fra.com

en-tête avec une ligne horizontale de chaque côté

Je travaille sur du CSS où la conception demande que les titres de page (en-têtes) soient centrés avec des lignes horizontales verticalement centrées de chaque côté. De plus, il y a une image d'arrière-plan sur la page, donc l'arrière-plan du titre doit être transparent.

J'ai centré le titre et je peux utiliser une pseudo-classe pour créer la ligne. Mais j'ai besoin que la ligne disparaisse lorsqu'elle traverse le texte du titre.

J'ai envisagé d'utiliser un dégradé d'arrière-plan qui devient transparent là où se trouvent les mots, mais comme chaque titre peut avoir une longueur différente, je ne saurais pas où mettre les arrêts.

Voici le CSS jusqu'à présent:

h1 {  
    text-align: center;  
    position: relative;  
    font-size: 30px;  
    z-index: 1;  
}  

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}

Voici où j'en suis: http://jsfiddle.net/XWVxk/1/

Cela peut-il être fait avec CSS sans ajouter de code HTML supplémentaire?

htmlcsspseudo-class
36
Tom Greever

Regardez ça http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition , voici votre réponse.

Voici votre code d'origine modifié

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

Remarque: l'article n'est plus en ligne, voici la dernière bonne version archivée: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes -pas-cap-premiere-edition

66
Romain Pellerin

j'en avais besoin il y a quelques jours, mais la réponse acceptée ne fonctionne pas dans IE.

voici ce que j'ai trouvé: fonctionne dans tous les principaux navigateurs (> = ie8)

jsfiddle: http://jsfiddle.net/gKve7/

HTML:

<h2 class="decorated"><span>My Title</span></h2>

CSS:

/* headlines with lines */
.decorated{
     overflow: hidden;
     text-align: center;
 }
.decorated > span{
    position: relative;
    display: inline-block;
}
.decorated > span:before, .decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    width: 592px; /* half of limiter */
    margin: 0 20px;
}
.decorated > span:before{
    right: 100%;
}
.decorated > span:after{
    left: 100%;
}
34
electrophanteau

Cela pourrait fonctionner:

.floatClear {
  clear: both;
}
#wrapper {
  text-align: center;
  position: relative;
}
#wrapper .line {
  border-bottom: 2px solid red;
  position: absolute;
  width: 100%;
  top: 15px;
}
#wrapper .textbox {
  position: absolute;
  width: 100%;
}
#wrapper .textbox .text {
  background-color: white;
  margin: 0px auto;
  padding: 0px 10px;
  text-align: center;
  display: inline;
  font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div class="line"></div>
    <div class="textbox">
      <div class="text">This is my Title</div>
    </div>
  </div>
</body>

</html>

Ce qui se passe ici, c'est que vous placez le texte sur la ligne d'arrière-plan et avec la couleur d'arrière-plan plus le remplissage latéral afin qu'il cache la ligne derrière le bloc de texte.

2
user1467267