Question

I'm trying to make responsive proportionally rectangles for my gallery, which was working, but i can't centering text vertically. I don't understand how to proportionally resize centering text. Any help or advice will be appreciated. Thanks.

#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 Styles

@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>

My current test site below:-

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%;
}

只需在所有'a'标记之间添加'span'标记

Answer 2

在li标签中包含的所有锚标签中都有55％的填充底部规则。把它取出来...因为这将在你的跨度之后用文本

显示那么长的空格

您可以将此填充空间平均分为顶部和底部

#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;
}

中心<a href=""> text vertically inside undefined height </a> <li> <a href="">

4 个答案: