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

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>

文本应在每个框中水平居中。 现在，它们都没有以相同的方式对齐。有些在左边，有些在右边。 Landing Page Screenshot

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 {       字体系列：“ Operetta 8”，衬线；       字体粗细：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>