老师看下如何让container居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding:0px;
margin:0px;
}
html, body{
width:100%;
height:100%;
}
.container{
position: absolute;
display: inline-block;
/*居中*/
}
.container .first-row{
background-color: violet;
text-align: center;
padding: 20px 40px;
}
.container .first-row img{
margin-right:40px;
}
.container .second-row{
background-color: turquoise;
padding: 40px 0px;
text-align: center;
}
.container .second-row img{
margin-right: 55px;
}
.container div img:nth-last-child(1){
margin-right:0px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="first-row">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
</div>
<div class="second-row">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
</div>
</div>
</body>
</html>效果:
我这样写居中代码:
.container{
position: absolute;
display: inline-block;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
效果:
container在页面中成功居中显示，但本身却变成这样了.................，想问下老师怎么修改防止container变化。以它为什么变化的原因.
17
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕慕子
2019-12-31 10:46:03
同学你好， 对于你的问题解如下：
首先，我们需要理解，transform只是在视觉上改变元素的位置，元素原来占据的位置不会发生改变，也就是说设置left：50%；属性后，container整体发生移动，让其左侧位置网页的中心位置，由于窗口大小不足以容纳所有的元素在一行显示，所以，就会自动换行显示，出现同学截图的现象。
建议修改：可以给contaienr设置固定的宽度，例如：1000px ， 然后，通过计算每个图片的间隙, 使间隙都相同。
图片间距相等实现思路（以上部分为例）：整体的宽度1000px ， 减去两个图片的宽度（可以给图片设置固定的宽度，刚好等于图片自身的宽度360px）, 就是剩余间距的宽度 , 一共有三个间距 , 所以除以3就是每一个间距的大小。然后给图片设置左外边距。
同学可以测试一下。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星