为什么我的文字没有居中对齐？

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

将悬停 div 相对位置和描述 div 绝对位置放在其中。

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 2

一个不那么令人头疼的解决方案可能是让 div 有一个背景图片

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

然后将文本居中 div。

Answer 3

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

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

为什么我的文字没有居中对齐？

Why doesn't my text align to the centre?

html

css

text-align

text-alignment