Question

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

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

HTML：

$path = __DIR__ . '/../../Starter/myfile.yml

CSS：

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

Answer 1

如果我理解了weel，你每次都要把物品放在中心位置吗？

如果是，你可以这样做：

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

Answer 2

你可以试试这个：

ul.img-list li {
   width:100%;
}

还尝试从 span.text-content 类中删除 margin-top

dinamic水平对齐 - 响应列

2 个答案: