【前端】请问怎么把这2个居中显示
本帖最后由 拨Q 于 2022-6-10 21:48 编辑试过：
ul{text-align:center;}li{display:inline-block;}不浮动发现不行，pc可以，移动端变成了上下2个了{:1_908:}我想把这2个模块并排居中显示，PC和移动都并排居中显示。请问怎么弄啊？
<!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>
大概看了一下，就用 ul{text-align:center;}li{display:inline-block;}不过需要调整 li 的宽度，移动端是因为宽度撑开了自动换行了。
其实你可以考虑使用 flex，现在比较少用float 浮动了，计算好宽度就行了 不嫌臃肿可以用table 用flex布局吧 本帖最后由 蓝萌养猫 于 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>
``` 目前建议你用flex布局和grid布局 grid布局目前算是新技术了这两个互相结合可以达到响应式的效果 建议网上学习下 如果只是单纯局长flex布局很轻松做到 float浮动已经很老的技术了不用他布局了 只是用来辅助一些效果
页:
[1]