https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
今天调整居中一直遇到一些问题,针对css的特性多少会发现一些无解的状态,实在写得太慢了,很多时候都需要靠练习去体验。查看了一些资料,发现下面使用绝对和相对位置配合还是挺凑效。
今天想实现两张图片,其中一张需要居中效果,改用下面的css样式可以显示想要的效果。外层position :relative, 内层 position: absolute; 改成这样。
<style>
.out {
width: 100%;
height: 50%;
position: relative;
text-align: center;
}
.in {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<!--个人信息区域-->
<div class="out">
<div class="in">
<img src=" __ROOT__/Public/img/0002.jpg" width="100%" height="100%"/>
</div>
<img src=" __ROOT__/Public/img/nianhui.jpg" width="100%" height="100%"/>
</div>
动态获取宽度
有时候想获取一个动态的宽度,有什么办法?前段时间查看了一下资料,现在记录一下,这个方法也挺适合的可以解决想要的问题
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
水平居中的一些设置
经常在div 实现这些居中的设置效果,这个方法也比较适合。使用margin:0 auto; 的一个容易犯错的地方,如果不写一个固定宽度,那么div就经常显示不到一个水平居中的问题。
但是通过 width: fit-content; 这样的方法则可以实现一个比较好的居中效果。
margin:0 auto;
text-align: center;