如何对齐文本中心 - 在 CSS 中不起作用

Question

我正在尝试使用以下代码对齐文本中心，但它不起作用。我的代码笔link和代码：

body {
padding: 0;
margin: 0;
}
.container {
width: 1200px;
overflow: auto;
margin: 240px auto;
background: transparent;
position: relative;
}
.container .box {
position: relative;
float: left;
width: calc(400px - 30px);
height: calc(300px - 30px);
background: yellow;
overflow: hidden;
margin: 15px;
border-radius: 10px;
box-sizing: border-box;
}
.container .box .icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: 0.5s;
z-index: 1;
}
.container .box:hover .icon {
top: 20px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
border-radius: 50%;
}
.container .box .icon .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
color: #fff;
transition: 0.5s;
}
.container .box:hover .icon .fa {
font-size: 40px;
}
.container .box .content {
position: absolute;
top: 100px;
height: calc(100% - 100px);
padding: 20px;
box-sizing: border-box;
transition: 0.5s;
text-align: center;
}

<div class="container">
<div class="box">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Search</h3>
<p>sadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen</p>
</div>
</div>
</div>

Answer 1

将width: 100%添加到content元素以适合其容器中的绝对定位元素 - 请参阅下面的演示：

body {
padding: 0;
margin: 0;
}
.container {
width: 1200px;
overflow: auto;
margin: 240px auto;
background: transparent;
position: relative;
}
.container .box {
position: relative;
float: left;
width: calc(400px - 30px);
height: calc(300px - 30px);
background: yellow;
overflow: hidden;
margin: 15px;
border-radius: 10px;
box-sizing: border-box;
}
.container .box .icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: 0.5s;
z-index: 1;
}
.container .box:hover .icon {
top: 20px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
border-radius: 50%;
}
.container .box .icon .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
color: #fff;
transition: 0.5s;
}
.container .box:hover .icon .fa {
font-size: 40px;
}
.container .box .content {
position: absolute;
top: 100px;
height: calc(100% - 100px);
padding: 20px;
box-sizing: border-box;
transition: 0.5s;
text-align: center;
width: 100%; /* ADDED */
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Search</h3>
<p>sadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen</p>
</div>
</div>
</div>

您实际上不需要在此处定位- 使用flexbox并将其对齐到底部。

1. 删除height，绝对position和top从content。
2. 将您的box设为flexbox并添加align-items: flex-end以将其推到底部。

请参阅下面的演示：

body {
padding: 0;
margin: 0;
}
.container {
width: 1200px;
overflow: auto;
margin: 240px auto;
background: transparent;
position: relative;
}
.container .box {
position: relative;
float: left;
width: calc(400px - 30px);
height: calc(300px - 30px);
background: yellow;
overflow: hidden;
margin: 15px;
border-radius: 10px;
box-sizing: border-box;
display: flex; /* ADDED */
align-items: flex-end; /* ADDED */
}
.container .box .icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: 0.5s;
z-index: 1;
}
.container .box:hover .icon {
top: 20px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
border-radius: 50%;
}
.container .box .icon .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
color: #fff;
transition: 0.5s;
}
.container .box:hover .icon .fa {
font-size: 40px;
}
.container .box .content {
/*position: absolute;
top: 100px;
height: calc(100% - 100px);*/
padding: 20px;
box-sizing: border-box;
transition: 0.5s;
text-align: center;
width: 100%; /* ADDED */
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Search</h3>
<p>sadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen</p>
</div>
</div>
</div>

Answer 2

您的文本完美对齐，问题是.content的宽度与框的宽度不同。将width: 100%;添加到.content中，它应该是固定的(也减小 p 的大小，因为它太长了)

.container .box .content {
position:absolute;
width: 100%;
top:100px;
height:calc(100% - 100px);
padding:20px;
box-sizing:border-box;
transition:0.5s;
text-align:center;
}