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

Question

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

因为我的立场：绝对;，我已经重申了宽度：100%;。这似乎有助于稍微改变对齐方式，但是当我指定文本对齐方式时不会居中：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 { 字体系列："轻歌剧8"，衬线; 字体粗细：400; 颜色： #e0e0e0; 字体大小：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>