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

Question

I'm designing a landing page on a photography web site. There are currently six list items with h3 text within each one. I'm unable to center the h3 text, horizontally, within each single li.

Because I have position: absolute;, I have already re-stated width: 100%;. That seems to help change the alignment a little, but does not center when I specify 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> 

The text should be centered within each box, horizontally. Right now, none of them are aligned in the same way. Some are more to the left and some are more to the right. Landing Page Screenshot

Answer 1

Cleaned ya up a bit in the process, welcome to stack overflow, cheers!

 .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

Three things I needed to adjust.

From inherit to 100% to take up all available space.

.p-info { position: absolute; width: 100%; height: 100%; }

The removed extra padding in h3 and changed the margin to 0 auto.

.p-info h3 { font-family: "Operetta 8", serif; font-weight: 400; color: #e0e0e0; font-size: 20px; / margin: 0 10px; / margin: 0 auto; / padding: 80px 5px 0 5px; / padding: 80px 0px 0 0px; text-align: center; text-transform: uppercase; width: 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>