如何解决使用translateX和溢出使绝对定位的div居中:自动不带边距
我正在尝试一种非常简单的方法来居中并保留div的整个大小而没有成功,请查看以下代码段:
* {
box-sizing: border-box;
}
.body {
width: 400px;
height: 100px;
float: left;
margin-right: 20px;
position: relative;
}
.body.smaller {
width: 200px;
}
.container {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: auto;
border: 2px solid blue;
}
.child {
width: 300px;
height: 1000px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 2px solid green;
}
<div class="body">
<div class="container">
<div class="child"></div>
</div>
</div>
<div class="body smaller">
<div class="container">
<div class="child"></div>
</div>
</div>
在此代码段中可以注意到,第一个样本正确渲染并居中,而较小的样本则没有,绿色的左边框被裁剪掉了。
如何使用translateX
转换选项显示div的全部内容,而没有margin: 0 auto;
之类的技巧或类似的语句?
我可以结合使用缩放容器div和滚动子div来实现这一点,我尝试了所有可能没有运气的组合。
更新:请注意,并非所有尺寸都没有前缀,只是样品的宽度和高度,因此,不应进行任何强制计算以获得预期结果。
更新2:我无法使用margin: 0 auto;
方式使div居中,因为我试图获得特定的结果。看看这个JSFiddle:https://jsfiddle.net/Emulator000/79c5L6o8/12/
function scale() {
let children = document.getElementsByClassName('child');
for (let i = 0; i < children.length; i++) {
children[i].style.transform = 'scale(3)';
}
}
* {
box-sizing: border-box;
}
.body {
width: 400px;
height: 100px;
float: left;
margin-right: 20px;
position: relative;
}
.body.smaller {
width: 200px;
}
.container {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: auto;
border: 2px solid blue;
}
.child {
display: block;
width: 300px;
height: 1000px;
margin: 0 auto;
border: 2px solid green;
transform-origin: 0 0;
}
<div class="body">
<div class="container">
<div class="child"></div>
</div>
</div>
<div class="body smaller">
<div class="container">
<div class="child"></div>
</div>
</div>
<button onclick="scale()">Scale</button>
如您所见,如果按下“缩放”按钮,则较小的将正确缩放,并且可以按预期方式滚动div,而较大的div将显示一个空格,并以前缀和计算出的边距开始缩放,使用“ justify”,“ box”,带有“ display:inline-block”或类似内容的居中文字等类似技术也可以发现此问题。
解决方法
尝试以下操作:
* {
box-sizing: border-box;
}
.body {
width: 400px;
height: 100px;
float: left;
margin-right: 20px;
position: relative;
}
.body.smaller {
width: 200px;
}
.container {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: auto;
border: 2px solid blue;
}
.child {
//width: 300px;
width: 80%;
height: 1000px;
position: absolute;
//left: 50%;
left: 10%;
//transform: translateX(-50%);
border: 2px solid green;
}
<div class="body">
<div class="container">
<div class="child"></div>
</div>
</div>
<div class="body smaller">
<div class="container">
<div class="child"></div>
</div>
</div>
,
滚动条无法显示右边距,因此您可以在缩放后将其删除
<head>
</head>
<style>
* {
box-sizing: border-box;
}
.body {
width: 400px;
height: 100px;
float: left;
margin-right: 20px;
position: relative;
}
.body.smaller {
width: 200px;
}
.container {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: auto;
border: 2px solid blue;
}
.child {
display: block;
width: 300px;
height: 1000px;
margin: 0 auto;
border: 2px solid green;
transform-origin: 0 0;
}
</style>
<body>
<div class="body">
<div class="container">
<div class="child">Lorem,ipsum dolor sit amet consectetur,adipisicing elit. Optio sequi quos amet,doloremque earum assumenda sapiente recusandae explicabo fuga,sed provident! Aspernatur ex neque maiores voluptatibus reprehenderit! At,quasi laboriosam.</div>
</div>
</div>
<div class="body smaller">
<div class="container">
<div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius iusto numquam,autem eligendi voluptas ab qui id soluta voluptatum molestias sapiente dignissimos enim illo,impedit omnis tempore,corporis,ipsam accusantium.</div>
</div>
</div>
<button onclick="scale()">Scale</button>
<script type="text/javascript">
function scale() {
let children = document.getElementsByClassName('child');
for (let i = 0; i < children.length; i++) {
children[i].style.transform = 'scale(3)';
// Remove the margin
children[i].style.margin = '0';
}
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。