居中对齐 ListItemContent 并将列表居中 DIV

Question

我正在尝试将此列表置于“联系我”和 hr 标签下方的中心位置，但惨遭失败。这些东西在列中完美居中，但列表和图标左对齐，理想情况下我希望它们像其他所有东西一样位于中心。我试过调整内容和对齐文本，但我可能把它们放在了错误的地方。

假设我没有 CSS 并引导我完成它哈哈。

非常感谢。

<Cell col={6}>
    <h2>Contact Me</h2>
    <hr/>
    <div className="contact-list-con">
       <List>
         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>perm_phone_msg</Icon>
             <a href="tel:">888-888-8888</a>
           </ListItemContent>
         </ListItem>

         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>email</Icon>
             <a href="mailto:">hello@helloworld.com</a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>

Answer 1

<div class="centered">
<Cell col={6}>
    <h2>Contact Me</h2>
    <hr/>
    <div class="contact-list-con">
       <List>
         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>perm_phone_msg</Icon>
             <a href="tel:">888-888-8888</a>
           </ListItemContent>
         </ListItem>

         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>email</Icon>
             <a href="mailto:">hello@helloworld.com</a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>
</div>

.centered{
display:flex;
flex-direction:row;
justify-content:center;
width:100%;
}
.contact-list-con{
width:auto;
}

如果将其放入弹性容器中，则无需使用 left, right, position

即可将其居中

居中对齐 ListItemContent 并将列表居中 DIV

Center Align ListItemContent and Center the List in a DIV

css

reactjs

list

material-ui

listitem