Pourquoi mon texte ne s'aligne-t-il pas au centre?

Mon texte ne s'aligne pas au centre où il devrait être, évidemment vous pouvez ajouter une marge ou un rembourrage ou autre, mais cela ne résout pas le problème à long terme, surtout si personne ne sait quel titre sera là .Pourquoi mon texte ne s'aligne-t-il pas au centre?

Fiddle: http://jsfiddle.net/385zLos5/

HTML:

<!DOCTYPE html> 

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900"> 
</head> 
<body> 
    <main> 
     <div class="hover"> 
      <div class="description"> 
       <h3>Title</h3> 
       <a>This is a long description, I don't know what to write here.</a> 
      </div> 
      <img src="https://images.unsplash.com/photo-1445127040028-b1bdb9acd16e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=5f10c1c850239222d20e96ae1b8b5862"> 
     </div> 
    </main> 
</body>

CSS:

* { 
font-family: "Raleway", Century Gothic; 
} 

body { 
margin: 0px; 
width: 100%; 
} 

.hover { 
width: 33.333333333333%; 
float: left; 
overflow: hidden; 
} 

.hover > .description { 
text-align: center; 
position: absolute; 
} 

.hover > img { 
width: 105%; 
filter: blur(5px); 
transition: 0.3s ease; 
margin: -5px -10px -10px -5px; 
} 

.hover:hover > img { 
filter: blur(0px); 
transition: 0.3s ease; 
} 

.hover > .description > h3, 
.hover > .description > h3:after { 
position: absolute; 
color: #fff; 
z-index: 3; 
transition: 0.3s ease; 

} 

.hover:hover > .description > h3 { 
transition: 0.3s ease; 

} 

.hover > .description > a, 
.hover > .description > a:after { 
position: absolute; 
color: #fff; 
z-index: 3; 
transition: 0.3s ease; 

} 

.hover:hover > .description > a { 
transition: 0.3s ease; 

}

Source

2015-12-15 TheLexoPlexx

Centre horizontalement, verticalement, ou les deux? – j08691

Désolé, principalement horizontalement. – TheLexoPlexx

Probablement cause du «positionnement absolu» ou du «flottant». Pas certain; ça fait un petit moment que j'ai joué avec HTML/CSS. –

D'abord, vous devez définir position: relative; le parent puis width: 100% sur absolute positionné enfant comme celui-ci

* { 
 
    font-family: "Raleway", Century Gothic; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 

 
.hover { 
 
    width: 33.333333333333%; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.hover > .description { 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100%; 
 
    color: white; 
 
    z-index: 5; 
 
} 
 

 
.hover > img { 
 
    width: 105%; 
 
    filter: blur(5px); 
 
    transition: 0.3s ease; 
 
    margin: -5px -10px -10px -5px; 
 
} 
 

 
.hover:hover > img { 
 
    filter: blur(0px); 
 
    transition: 0.3s ease; 
 
} 
 

 
.hover:hover > .description > h3 { 
 
    transition: 0.3s ease; 
 
} 
 

 
.hover:hover > .description > a { 
 
    transition: 0.3s ease; 
 
}

<main> 
 
    <div class="hover"> 
 
    <div class="description"> 
 
     <h3>Title</h3> 
 
     <a>This is a long description, I don't know what to write here.</a> 
 
    </div> 
 
    <img src="http://placehold.it/350x300/000000/ffffff"> 
 
    </div> 
 
</main>

Source

2015-12-15 17:55:33

Marque vol stationnaire div position relative et la description div position de absoute à l'intérieur.

jsfidle demo

CSS

.hover { 
    width: 33.333333333333%; 
    float: left; 
    overflow: hidden; 
    position: relative; 
} 

.description { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
}

Source

2015-12-15 17:50:45 Ajey

Une solution, avec moins de maux de tête, pourrait être juste avoir la div ont une image de fond

<div style="background-image: url(../images/test-background.gif);

puis centrer le texte le div.

Source

2015-12-15 17:54:52 hogarth45

Ensuite, je ne pourrais plus flouter l'arrière-plan et ne pas flou sur hover – TheLexoPlexx

Pourquoi mon texte ne s'aligne-t-il pas au centre?

Répondre

Questions connexes