如何将我的图标放在页面中间并将文本放在图标下方？
Posted
技术标签:
【中文标题】如何将我的图标放在页面中间并将文本放在图标下方？【英文标题】：How can I center my icons in the middle of the page and place the text under the icons? 【发布时间】：2021-10-01 11:05:08 【问题描述】：如何将我的图标置于页面中间并将文本置于图标下方？ 我试了 4 个小时，还是不行；如果是基于Flex box，在DIV中间就好了，
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.row
display: flex; /* مهمة */
justify-content: space-between;
.servics
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
.icons
display: flex;
.child
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
.icon1, .icon2, .icon3, .icon4
color: rosybrown;
line-height: 150px;
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="row">
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
</pre>
【问题讨论】：
【参考方案1】：以下代码可能会有所帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.servics
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
.icons
display: flex;
justify-content: center;
.child
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
.icon1, .icon2, .icon3, .icon4
color: rosybrown;
line-height: 150px;
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
【讨论】：
【参考方案2】：把任何东西放在你可以使用的页面中间>>
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
并且是另一种将文本放在图标下的方法，
在i标签上使用你的边框样式:)
看这里>>
.ur-icon
border: & & &;
border-radius: &;
looc ^^^ 我在图标中使用了边框样式而不是 div（子图标#）
之后你可以加上和高度
对于空格使用填充/边距
玩得开心。 ??
【讨论】：
【参考方案3】：试试这个：它的 flex 布局方法。在过去，将页面居中居中是一件很困难的事情，现在它已经改变了。删除所有样式代码并替换为以下代码：
/* CSS */
body
display: flex;
justify-content: center;
background: orange;
align-items: center;
height: 100vh;
.icons *
display: inline-block;
.servics
text-align: center;
【讨论】：
以上是关于如何将我的图标放在页面中间并将文本放在图标下方？的主要内容，如果未能解决你的问题，请参考以下文章
如何设置我的jframe的图标，而不用在导出jar时把图标放在桌面上？