如何居中对齐同时在伸缩框内内联显示的链接项

Question

我是一个初学者，我试图在不使用youtube教程的情况下做一些练习，我似乎无法将我的链接项对齐在页面的中心。我正在使用flex和flexbox，但是我已经将它们对齐到中心，但是链接只会在块格式中列出而不是内联格式时居中对齐。有人能帮忙吗?

.container2 {
/* display: flex; */
width: 100%;
height: 50%;
background-color: rgb(247, 247, 247);
padding: 2%;
/* justify-content: center; */
}

/* This is the welcome to iExclusive Producitions section */
.h2container {
font-family: 'Work Sans', sans-serif;
display: flex;
/* position: relative; */
text-items: center;
display: flex;
/* align-items: center; */
justify-content: center;
}

/* This controls the Featured in Section */
.container2 p {
display: flex;
justify-content: center;
text-transform: uppercase;
}
.container2 a {
/* display: flex; */
justify-content: center;
align-items: center;
}
.container2list li {
display: inline-flex;
list-style: none;
/* This command doesn't remove the underline and text decoration */
text-decoration: none;
justify-content: center;
align-items: center;
}
.container2list a {
/* This command is what removes the underline and text decoration  */
text-decoration: none;
margin: 10px;
/* align-items: center; */
}
.a1 {
border: 1px solid rgb(0, 0, 0);
width: 150px;
padding: 10px;
text-decoration: none;
color: black;
text-align: center;
}
.a2 {
border: 1px solid rgb(0, 0, 0);
width: 150px;
padding: 10px;
text-decoration: none;
color: black;
text-align: center;
}
.a1:hover {
background-color: black;
color: white;
}
.a2:hover {
background-color: black;
color: white;
}
.container2list .a1 .a2 {
display: inline;
justify-content: center;
}

<main>
<div class="container2">
<h2 class="h2container"> Welcome to iExclusive Productions</h2>
<p>Featured In</p>
<ul class="container2list">
<li><a href="https://www.munaluchibridal.com/elegant-and-fun-wedding-in-bristol-pa/" target="_blank" class="a1">Munaluchi Bride</a></li>
<li><a href="https://www.phillymag.com/philadelphia-wedding/2020/07/06/philadelphia-black-wedding-photographers/" target="_blank" class="a2">PhillyMag</a></li>
</ul>
</div>
</main>

Answer 1

您只需将display: flex和justify-content: center添加到"ul"元素，并删除左padding。

.container2{
/* display: flex; */
width: 100%;
height: 50%;
background-color: rgb(247, 247, 247);
padding: 2%;
/* justify-content: center; */
}
/* This is the welcome to iExclusive Producitions section */
.h2container {
font-family: 'Work Sans', sans-serif;
display: flex;
/* position: relative; */
text-items: center;
display: flex;
/* align-items: center; */
justify-content: center;
}
/* This controls the Featured in Section */
.container2 p {

display: flex;
justify-content: center;
text-transform: uppercase;
}
.container2 a {
/* display: flex; */
justify-content: center;
align-items: center;
}
.container2list {
display: flex;
justify-content: center;
padding-left: 0;
}
.container2list li {
display: inline-flex;
list-style: none;
/* This command doesn't remove the underline and text decoration */
text-decoration: none;
justify-content: center;
align-items: center;
}
.container2list a {
/* This command is what removes the underline and text decoration  */
text-decoration: none;
margin: 10px;
/* align-items: center; */

}
.a1 {
border: 1px solid rgb(0, 0, 0);
width: 150px;
padding: 10px;
text-decoration: none;
color: black;
text-align: center;
}
.a2 {
border: 1px solid rgb(0, 0, 0);
width: 150px;
padding: 10px;
text-decoration: none;
color: black;
text-align: center;
}
.a1:hover {
background-color: black;
color: white;
}
.a2:hover {
background-color: black;
color: white;
}
.container2list .a1 .a2 {
display: inline;
justify-content: center;
}

<main>
<div class="container2">
<h2 class="h2container"> Welcome to iExclusive Productions</h2>
<p>Featured In</p>
<ul class="container2list">
<li><a href="https://www.munaluchibridal.com/elegant-and-fun-wedding-in-bristol-pa/" target="_blank" class="a1">Munaluchi Bride</a></li>
<li><a href="https://www.phillymag.com/philadelphia-wedding/2020/07/06/philadelphia-black-wedding-photographers/"target="_blank" class="a2">PhillyMag</a></li>
</ul>
</div>
</main>