如何在列表项中水平居中对齐文本

Question

我正在设计摄影网站上的登录页面。 当前有六个列表项，每个项中包含h3文本。 我无法在每个li中将h3文本水平居中。

因为我拥有位置：绝对；所以我已经声明宽度：100％;。 这似乎有助于稍微改变对齐方式，但是当我指定text-align：center;时不会居中。

 .p-section { max-width: 1920px; margin: 0 auto; padding: 1% 2%; } .p-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; /* border: 3px dashed blue; */ } .p-grid:after { clear: both; } .p-grid:after, .p-grid:before { content: ''; display: table; } .p-grid li { width: 200px; height: 200px; display: inline-block; margin: 20px; /* border: 2px solid red; */ } .p-box { width: 100%; height: 100%; position: relative; cursor: pointer; border-radius: 5px; -webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3 ease-in-out; -moz-transition: 0.3s ease-in-out, -moz-transform 0.3 ease-in-out; transition: 0.3s ease-in-out, transform 0.3s ease-in-out; } .p-box:hover { transform: scale(1.05); } .p-cov1 { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/mj-cover.jpg); } .p-cov2 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/lp-cover.jpg); } .p-cov3 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/pp-cover.jpg); } .p-cov4 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/la-cover.jpg); } .p-cov5 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/an-cover.jpg); } .p-cov6 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/se-cover.jpg); } .p-info { position: absolute; width: inherit; height: inherit; } .p-info h3 { font-family: "Operetta 8", serif; font-weight: 400; color: #e0e0e0; font-size: 20px; margin: 0 10px; padding: 80px 5px 0 5px; text-align: center; text-transform: uppercase; width: 100%; } 

 <div class="p-section"> <ul class="p-grid"> <li> <div class="p-box p-cov1"> <a href="#"> <div class="p-info"> <h3>Live Music</h3> </div></a> </div> </li> <li> <div class="p-box p-cov2"> <a href="#"> <div class="p-info"> <h3>Light Painting</h3> </div></a> </div> </li> <li> <div class="p-box p-cov3"> <a href="#"> <div class="p-info"> <h3>Portraits & People</h3> </div></a> </div> </li> <li> <div class="p-box p-cov4"> <a href="#"> <div class="p-info"> <h3>Nature</h3> </div></a> </div> </li> <li> <div class="p-box p-cov5"> <a href="#"> <div class="p-info"> <h3>Animals</h3> </div></a> </div> </li> <li> <div class="p-box p-cov6"> <a href="#"> <div class="p-info"> <h3>Special Events</h3> </div></a> </div> </li> </ul> </div> 

文本应在每个框中水平居中。 现在，它们都没有以相同的方式对齐。 有些在左边，有些在右边。 登陆页面截图

Answer 1

清理过程中有点麻烦，欢迎堆栈溢出，干杯！

 .p-grid { max-width: 1920px; margin: 0 auto; padding: 1% 2%; padding: 0; list-style: none; text-align: center; /* border: 3px dashed blue; */ } .p-grid li { display: inline-block; margin: 20px; vertical-align: top; /* border: 2px solid red; */ } .p-cov1 { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/mj-cover.jpg); } .p-cov2 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/lp-cover.jpg); } .p-cov3 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/pp-cover.jpg); } .p-cov4 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/la-cover.jpg); } .p-cov5 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/an-cover.jpg); } .p-cov6 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/se-cover.jpg); } .p-box { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; font-family: "Operetta 8", serif; font-weight: 400; color: #e0e0e0; font-size: 20px; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 5px; -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .p-box:hover { transform: scale(1.05); -webkit-transform: scale(1.05); } 

 <ul class="p-grid"> <li> <a class="p-box p-cov1" href="#"> Live Music </a> </li> <li> <a class="p-box p-cov2" href="#"> Light Painting </a> </li> <li> <a class="p-box p-cov3" href="#"> Portraits & People </a> </li> <li> <a class="p-box p-cov4" href="#"> Nature </a> </li> <li> <a class="p-box p-cov5" href="#"> Animals </a> </li> <li> <a class="p-box p-cov6" href="#"> Special Events </a> </li> </ul> 

Answer 2

我需要调整三件事。

从继承到100％占用所有可用空间。

.p-info {位置：绝对； 宽度：100％; 高度：100％; }

在h3中删除了多余的填充，并将边距更改为0自动。

.p-info h3 {font-family：“ Operetta 8”，serif; 字体粗细：400； 颜色：＃e0e0e0; font-size：20px; / 边距：0 10px; /保证金：0自动; / 填充：80px 5px 0 5px; /填充：80px 0px 0 0px; 文本对齐：居中； 文本转换：大写； 宽度：100％; }

 .p-section { max-width: 1920px; margin: 0 auto; padding: 1% 2%; } .p-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; /* border: 3px dashed blue; */ } .p-grid:after { clear: both; } .p-grid:after, .p-grid:before { content: ''; display: table; } .p-grid li { width: 200px; height: 200px; display: inline-block; margin: 20px; /* border: 2px solid red; */ } .p-box { width: 100%; height: 100%; position: relative; cursor: pointer; border-radius: 5px; -webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3 ease-in-out; -moz-transition: 0.3s ease-in-out, -moz-transform 0.3 ease-in-out; transition: 0.3s ease-in-out, transform 0.3s ease-in-out; } .p-box:hover { transform: scale(1.05); } .p-cov1 { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/mj-cover.jpg); } .p-cov2 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/lp-cover.jpg); } .p-cov3 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/pp-cover.jpg); } .p-cov4 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/la-cover.jpg); } .p-cov5 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/an-cover.jpg); } .p-cov6 { background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(../Photo_Files/Photography/se-cover.jpg); } .p-info { position: absolute; width: 100%; height: 100%; } .p-info h3 { font-family: "Operetta 8", serif; font-weight: 400; color: #e0e0e0; font-size: 20px; /*margin: 0 10px;*/ margin: 0 auto; padding: 80px 0px 0 0px; text-align: center; text-transform: uppercase; width: 100%; } 

 <div class="p-section"> <ul class="p-grid"> <li> <div class="p-box p-cov1"> <a href="#"> <div class="p-info"> <h3>Live Music</h3> </div></a> </div> </li> <li> <div class="p-box p-cov2"> <a href="#"> <div class="p-info"> <h3>Light Painting</h3> </div></a> </div> </li> <li> <div class="p-box p-cov3"> <a href="#"> <div class="p-info"> <h3>Portraits & People</h3> </div></a> </div> </li> <li> <div class="p-box p-cov4"> <a href="#"> <div class="p-info"> <h3>Nature</h3> </div></a> </div> </li> <li> <div class="p-box p-cov5"> <a href="#"> <div class="p-info"> <h3>Animals</h3> </div></a> </div> </li> <li> <div class="p-box p-cov6"> <a href="#"> <div class="p-info"> <h3>Special Events</h3> </div></a> </div> </li> </ul> </div>