javascript - 动态水平对齐 - 响应列

Question

我正在编写一个包含带有响应列的 ul 列表的网站。根据窗口的大小，列宽将缩小或扩大。我希望 li 元素中包含的文本根据新的列宽居中对齐(水平)。您将能够在此示例中看到真实页面: http://studiomk27.com.br/portfolio/html/e_residencial.html

我想让代码识别浏览器的窗口大小并考虑这个可变宽度来重新计算 li 元素的位置，所以它会被放在列的中间。使用一些 javascript 是个好主意吗？不知道怎么样，不过

HTML:

<div class="gridresidencial">
<ul class="img-list">


<div class="grid-item" id="q5">
  <li>
    <a href="residencial_casanamata.html">
       <figure>
        <img src="../img/mini_casanamata.jpg" alt="">
        <span class="text-content"><span><h2>CASA</h2>NA MATA</span></span>
       </figure>
    </a>
  </li>
</div>  

<div class="grid-item" id="q4">
  <li>
     <a href="residencial_casadabahia.html">
         <figure>
         <img src="../img/mini_casadabahia.jpg" alt="">
         <span class="text-content"><span><h2>CASA</h2> DA BAHIA </span ></span>
         </figure>
     </a>
   </li>
 </div>

 <div class="grid-item" id="q7">
    <li>
     <a href="residencial_cobogo.html">
      <figure>
        <img src="../img/mini_cobogo.jpg" alt="">
        <span class="text-content"><span><h2>CASA</h2> COBOGÓ </span></span>
      </figure>
      </a>
   </li>
 </div>

</ul>
</div>

CSS:

.gridresidencial {
  margin-top: calc(1.25% + 180px); 
  width:101.5%;
  padding:0;
}

@media only screen and (min-width: 1930px) {
.img-list {  float: none;columns: 4;}}
@media only screen and (min-width: 1285px) and (max-width:1930px) {
.img-list { float: none;columns: 3;}}
@media only screen and (min-width: 750px) and (max-width:1285px)  {
.img-list { float: none; columns: 2;}}

.img-list {
    margin: 0 auto;
    text-align: center;
    padding:0;
    list-style-type: none;
    width:100%;
    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;
}

li {
    display: inline-block;
    vertical-align: top;
        text-align: center;
    padding: 0px;
  margin: 0 auto;
  float:none;
  position: relative;
}

li figure {
  padding: 5px;
  margin: 0 auto;
  width:100%;
}

.img-list img{
  float: right;
  max-height:560px;
  max-width:1280px; 
  margin:0;
  width:645px;
  height: 285px;
}

@media only screen and (min-width: 1930px) {
 span.text-content { 
      float: center;
      columns: 4;
      margin-left:15px;
      opacity: 0;
    }

 span.text-content {
  color: #FFFFFF;
  cursor: pointer;
  display: table;
  height: 320px;
  margin-top:50px;
  position: absolute;
  top: 0;
  width: 100%;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size:40px;
  font-family: "AktivGroteskStdBd";
  line-height: 0.6;
}

h2 {text-align: center;}

ul:after {
  display: table;
  clear: both;
  content: '';
}

Answer 1

如果我理解得很好，你想每次都将元素居中吗？

如果是，您可以这样做:

.gridresidencial {
  width:100%;
  padding:0;
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}