在未定义高度 <li> 内垂直居中 <a href> 文本

Question

我正在尝试为我的图库制作响应式矩形矩形，这很有效，但我无法将文本垂直居中。我不明白如何按比例调整居中文本的大小。任何帮助或建议将不胜感激。谢谢。

#container{
    margin-left:auto;
    margin-right:auto;
}

#MyList li{
    float: left;
    background-image: url(../images/bardiches.png);
    background-size: cover;
    background-position: center; 
}

#MyList a{
    text-align: center;
    line-height: 100%;

    display: block;
    background-color: rgba(255,255,255,.0);

    transition: background-color 500ms ease-out;
}

#MyList a:hover{
    background-color: rgba(255,255,255,.95);
}

Desktop/Tablet 样式

@media only screen and (min-width: 768px){
    #container{
        width:80%;
    }

    #MyList li{
        width:46%;
        margin-bottom:50px;
        margin-left: 2%;
        margin-right: 2%;
    }

    #MyList li:nth-child(4n){
        margin-right:0px;
    }

    #MyList a{
        height:100%;
        padding-bottom: 55%;
    }
}

html

<div id="container">
    <ul id="MyList">
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>

    </ul>
</div>

我当前的测试站点如下：-

http://benson.graphics/test/

Answer 1

#MyList li {
  margin-bottom: 50px;
  margin-left: 2%;
  margin-right: 2%;
  position: relative;
  width: 46%;
}
#MyList a span {
  bottom: 0;
  height: 5%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

只需将 'span' 标签放在所有 'a' 标签之间

Answer 2

li 标签中包含的所有锚标签中都有一个 55% 的底边距规则。把这个拿出来..因为这会在你的文本

跨度之后显示那个长长的白色 space

您可以将此填充 space 平均划分为顶部和底部

#MyList a{
padding-bottom: 27.5% !important;
padding-top: 27.5% !important;;
}

片段

 #MyList a{
    padding-bottom: 27.5% !important;
    padding-top: 27.5% !important;
    }

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title</title>
  <link href="css/reset.css" rel="stylesheet" type="text/css" />
  <link href="http://benson.graphics/test/css/styles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>
</head>

<body>
  <section>
    <div id="container">
      <ul id="MyList">
        <li>
          <a href="#"> 
                            Bardiches
                        </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </section>
  <script type="text/javascript" src="js/custom_behaviors.js"></script>
</body>

</html>

Answer 3

这是使用 flex 的另一种方式：

只需更改CSS中以下块的定义：

#container li {
   width: 46%;
   margin-bottom: 50px;
   margin-left: 2%;
   margin-right: 2%;
   height: 200px;
   display: flex;
   justify-content: space-around;
   flex-direction: column;
}

我不得不为我的测试添加一个高度标签，但这可能是因为我使用的照片。

Answer 4

尝试像这样将文本包装在 span 标签内并添加以下 CSS 规则。它也适用于多行文本。希望对您有所帮助。

<a href="#">
    <span>Bardiches</span>
</a>

#MyList a {
    position: relative;
}

#MyList a span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

在未定义高度 <li> 内垂直居中 <a href> 文本

Center <a href> text vertically inside undefined height <li>

html

css

image-gallery

centering