【前端】请问怎么把这2个居中显示

拨Q · 发表于 2022-6-10 17:58

本帖最后由拨Q 于 2022-6-10 21:48 编辑

试过：
ul{text-align:center;}li{display:inline-block;}不浮动发现不行，pc可以，移动端变成了上下2个了

我想把这2个模块并排居中显示，PC和移动都并排居中显示。请问怎么弄啊？

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta name="applicable-device" content="pc,wap">
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<script type="text/javascript" src="http://www.szlantoo.com/template/default/static/js/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="http://www.szlantoo.com/template/default/static/css/yunu.css">
    <link rel="stylesheet" href="http://www.szlantoo.com/template/default/static/css/font-awesome.min.css">
    <script type="text/javascript" src="http://www.szlantoo.com/template/default/static/js/yunu.js"></script>
    <script type="text/javascript" src="http://www.szlantoo.com/template/default/static/js/superslide.js"></script>
    <script src="http://www.szlantoo.com/template/default/static/js/jquery.imagezoom.min.js"></script>
</head>
<body>

<div class="main">
  <div class="i_box2 clearfix">
    <div class="center">

      <div class="box clearfix">
        <div class="pro_list"> 

          <div class="bd">
            <ul>
              
              <li> <a href="/jzzz/zycb/15.html">
                <div class="imgauto"> <img src="https://s1.ax1x.com/2022/06/10/X6aMuQ.png"> </div>
                <div class="text"> <span>这是一张红色图片</span> 
                  <!-- <p>型号：型号一</p> --> 
                </div>
                </a> </li>
              
              <li> <a href="/jzzz/zycb/18.html">
                <div class="imgauto"> <img src="https://s1.ax1x.com/2022/06/10/X6aG40.png"> </div>
                <div class="text"> <span>这是一张蓝色图片</span> 
                  <!-- <p>型号：型号一</p> --> 
                </div>
                </a> </li>
              
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>

  </div>
</div>

    <script type="text/javascript">
        $(function () {
            $('.imgauto img').imgAuto();
        })
    </script>

</body>
</html>

fmamcn · 发表于 2022-6-10 18:06

大概看了一下，就用 ul{text-align:center;}li{display:inline-block;} 不过需要调整 li 的宽度，移动端是因为宽度撑开了自动换行了。
其实你可以考虑使用 flex，现在比较少用float 浮动了，计算好宽度就行了

hjxhjxjx · 发表于 2022-6-10 18:49

不嫌臃肿可以用table

fyypll · 发表于 2022-6-10 19:24

用flex布局吧

蓝萌养猫 · 发表于 2022-6-10 19:39

本帖最后由蓝萌养猫于 2022-6-10 19:41 编辑

在head标签加入下面的style

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta name="applicable-device" content="pc,wap">
  <meta name="MobileOptimized" content="width" />
  <meta name="HandheldFriendly" content="true" />
  <script type="text/javascript" src="http://www.szlantoo.com/template/default/static/js/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" >
  <link rel="stylesheet" >
  <script type="text/javascript" src="http://www.szlantoo.com/template/default/static/js/yunu.js"></script>
  <script type="text/javascript" src="http://www.szlantoo.com/template/default/static/js/superslide.js"></script>
  <script src="http://www.szlantoo.com/template/default/static/js/jquery.imagezoom.min.js"></script>
  <!-- 加入这下面的代码 -->  
  <style>
      .bd > ul{
        display: flex;
        justify-content: center;
      }
      .bd > ul > li {
        float: none;
      }
  </style>
</head>

wlq7265003 · 发表于 2022-6-14 03:30

目前建议你用flex布局和grid布局 grid布局目前算是新技术了这两个互相结合可以达到响应式的效果建议网上学习下如果只是单纯局长flex布局很轻松做到 float浮动已经很老的技术了不用他布局了只是用来辅助一些效果

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 【前端】请问怎么把这2个居中显示

免费评分

免费评分

免费评分

免费评分

免费评分

个人中心