CSS我如何在包装器内部放置UL？

Question

我在将包含Facebook，Twitter和linkedin图标的ul居中时遇到麻烦。 在我的页面中，图标更偏向右侧而不居中。 任何帮助将不胜感激。

 body { margin: 0; font-family: sans-serif; } header { position: relative; display: block; width: 100%; height: 100vh; } .header-bg { position: absolute; width: 100%; height: 100%; background-image: url(macbook2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .header-dark { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .wrapper { width: 250px; height: auto; margin-top: -250px; } .selfie { width: 175px; height: 175px; border-radius: 50%; /*background-image: url(selfie.jpg);*/ background-position: center center; background-size: cover; border: 2px solid #6f6f70; margin: 0 auto; } h2 { color: white; text-align: center; } ul { list-style-type: none; text-align: center; } ul li { display: inline-block; } .ion-social-facebook { color: white; font-size: 32px; } .ion-social-twitter { color: white; font-size: 32px; } .ion-social-linkedin { color: white; font-size: 32px; } 

 <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <header> <div class="header-bg"></div> <div class="header-dark"> <div class="wrapper"> <div class="selfie"></div> <h2>Name</h2> <ul> <!--this is what i am trying to center--> <li> <a href="#" class="ion-social-facebook"></a> </li> <li> <a href="#" class="ion-social-twitter"></a> </li> <li> <a href="#" class="ion-social-linkedin"></a> </li> </ul> </div> </div> <nav> </nav> </header> 

Answer 1

您的居中工作。 只需使用padding: 0; 在ul上删除无序列表的左标准填充 。

 body { margin: 0; font-family: sans-serif; } header { position: relative; display: block; width: 100%; height: 100vh; } .header-bg { position: absolute; width: 100%; height: 100%; background-image: url(macbook2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .header-dark { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .wrapper { width: 250px; height: auto; margin-top: -250px; } .selfie { width: 175px; height: 175px; border-radius: 50%; /*background-image: url(selfie.jpg);*/ background-position: center center; background-size: cover; border: 2px solid #6f6f70; margin: 0 auto; } h2 { color: white; text-align: center; } ul { list-style-type: none; text-align: center; padding: 0; } ul li { display: inline-block; } .ion-social-facebook { color: white; font-size: 32px; } .ion-social-twitter { color: white; font-size: 32px; } .ion-social-linkedin { color: white; font-size: 32px; } 

 <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <header> <div class="header-bg"></div> <div class="header-dark"> <div class="wrapper"> <div class="selfie"></div> <h2>Name</h2> <ul> <!--this is what i am trying to center--> <li> <a href="#" class="ion-social-facebook"></a> </li> <li> <a href="#" class="ion-social-twitter"></a> </li> <li> <a href="#" class="ion-social-linkedin"></a> </li> </ul> </div> </div> <nav> </nav> </header>