为什么我的文字不对齐中心？
[英]Why doesn't my text align to the centre?
问题描述
My Text doesn't align to the center where it should be, obviously you could add margin or padding or whatever you like but that doesn't solve the problem in the long run, especially if nobody knows what title will be in there. 
“我的文字”未与应居中的位置对齐，显然，您可以添加边距或填充或其他所需的内容，但从长远来看并不能解决问题，尤其是如果没人知道其中的标题。
Fiddle: http://jsfiddle.net/385zLos5/ 小提琴： http : //jsfiddle.net/385zLos5/
HTML: 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: 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;
}
3 个解决方案
解决方案1
1 已采纳 2015-12-15 17:55:33
First you need to set position: relative; 首先，您需要设置position: relative; on parent and then width: 100% on absolute positioned child like this 在父级上，然后在width: 100%在absolute定位的子级上，像这样
* { 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>
解决方案2
0 2015-12-15 17:50:45
Make hover div relative position and description div absoute position inside it. 将悬停div的相对位置和描述div的绝对位置放在其中。
CSS 的CSS
.hover {
width: 33.333333333333%;
float: left;
overflow: hidden;
position: relative;
}
.description {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
解决方案3
0 2015-12-15 17:54:52
A solution, with less headache, could be to just have the div have a background image 一种解决方法，可以减轻头痛，可以让div具有背景图片
<div style="background-image: url(../images/test-background.gif);
and then center the text in the div. 然后将文本放在div中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.