html - 如何对齐文本中心 - 在 CSS 中不起作用
问题描述
我正在尝试使用以下代码对齐文本中心,但它不起作用。我的代码笔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>
解决方案
添加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
- 使用并将其与底部对齐。
- 删除
height
,绝对值position
和top
fromcontent
。 - 制作您
box
的 aflexbox
并添加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>
推荐阅读
- java - 在java中调用kotlin完成
- c - 有两个哈希表,当删除一个项目时,它会删除另一个
- wordpress - woocommerce 订阅 API
- python - 在类装饰器中动态设置属性
- android - 带有嵌套导航图的 Arch 新导航组件
- postgresql - 查询用于创建分组、聚合和过滤的行集的不同计数
- python-3.x - 为什么绘图不是从 matplotlib 中的零开始,而是从 y 条目中的最小值开始
- php - 插入 php 请检查代码是否有错误它不会连接或给出任何结果
- javascript - 按特定顺序加载多个脚本
- pdf - gGt 使用 Ghostscript 为每个文件计算 PDF 页面数的输出文件