Мой текст не выравнивается по центру, где он должен быть, очевидно, вы можете добавить маржи или отступы или что угодно, но это не решит проблему в конечном счете, особенно если никто не знает, какой титул будет там ,Почему мой текст не совпадает с центром?
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;
}
центра по горизонтали, по вертикали или оба? – j08691
Извините, в основном горизонтально. – TheLexoPlexx
Вероятно, причина «абсолютного позиционирования» или «поплавка». Не уверен; это было немного, так как я перепутал с HTML/CSS. –