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

问题描述

我正在尝试并且失败，无法将此列表置于“联系我”和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:">[e-mail]</a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>

解决方法

<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:">[e-mail]</a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>
</div>

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

如果将其放在Flex容器中，则可以将其居中，而不必使用left,right,position