enter image description here
正如你们所看到的，我将项目居中，但由于第一个项目有点小，右边的标题和文本没有与两个波纹管对齐。我可以手动添加一些填充来居中，但我不确定这是否是一个好的做法，也不确定当我添加媒体查询以使其响应时是否会影响顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.0/css/all.css">
<style>
body {
background-color: #eff1ed;
font-family: "Roboto", sans-serif;
}
/* Header and nav bar */
header {
display: flex;
}
.logo-guitar {
padding: 2% 1% 3% 2%;
}
.luthier-name {
width: 100%;
padding: 1.5% 0 0 1%;
}
#nav-bar {
display: flex;
text-align: center;
justify-content: space-between;
flex-direction: row;
}
.nav-link {
width: 94px;
text-align: center;
margin: 2px auto;
padding-top: 15%;
color: #131b23;
text-decoration: none;
font-weight: bold;
}
h1 {
font-family: "Satisfy", cursive;
font-size: 3rem;
}
/* email form */
.email-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#email {
height: 25px;
width: 100%;
}
#submit {
width: 80%;
margin-top: 5%;
background-color: #ffe121;
border: 0;
font-weight: bold;
height: 35px;
font-family: inherit;
font-size: large;
}
/* Features */
.fa-solid {
color: #e3170a;
font-size: 4rem;
}
.features {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.p-description {
max-width: 90vh;
}
section {
padding-top: 10%;
}
.icon {
padding-right: 3%;
}
</style>
</head>
<body>
<section>
<div class="features">
<div class="icon"><i class="fa-solid fa-fire"></i></div>
<div>
<h2>Premium Materials</h2>
<p class="p-description">
Our guitars are built with the best amazonian wood. This will
increase the longevity of your purchase.
</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa-solid fa-truck-fast"></i>
</div>
<div>
<h2>Shipping</h2>
<p class="p-description">
We make sure you recieve your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-user-check"></i></div>
<div>
<h2>Satisfaction</h2>
<p class="p-description">
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your instrument.
</p>
</div>
</div>
</section>
</body>
</html>我想知道在这些情况下什么是最好的选择。
1条答案
按热度按时间ezykj2lf1#
尝试使用固定宽度的Fontawsome图标，方法是将
fa-fw添加到类中（参见https://fontawesome.com/docs/web/style/fixed-width）。例如：