Question

我的文字没有与中心对齐，显然你可以添加边距或填充或任何你喜欢的东西，但从长远来看这并不能解决问题，特别是如果没人知道是什么标题将在那里。

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;

}

Answer 1

首先，您需要在父级上设置position: relative;，然后在width: 100%定位的子级上设置absolute

＆＃13;

* {
    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;   
}

＆＃13;

<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>

＆＃13;

Answer 2

将hover div相对位置和描述div absoute位置放在其中。

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;
}

Answer 3

一个解决方案，减少头痛，可能只是让div有一个背景图像

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

然后将文本居中于div。

为什么我的文字与中心对齐？

3 个答案: