如何在列表項中水平居中對齊文本

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>