首页 > 其他 > 详细

绝对定位left:50% 隐式设置了宽度

时间:2019-07-31 16:51:11      阅读:107      评论:0      收藏:0      [点我收藏+]

绝对定位left:50% 隐式设置了宽度

不定宽高的盒子如何在父盒子中垂直居中,我们常做的一种方式便是

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

那这个盒子是否隐式添加了宽度吗?

测试

html

<body>
  <div class="container">
    <div class="box">
      <p>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
      </p>
    </div>
  </div>
</body>

css

body{
  margin: 0;
}
.container {
  height: 200px;
  position: relative;
  margin: 50px auto;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

页面样式
技术分享图片

这种很合理,并没有出现上述的问题

惊喜出现了,当在句中加个空格
技术分享图片

居然换行了,像是给了一个宽度似的,最后审查时,发现为960px(电脑是1920的屏,刚好一半) 网友

结论

  • 上述问题,确实是对的,但是有前提,若是连续没有空格的句子,是不会出现的,要出现两种方式
    • 句子中间添加空格
    • 给 当前元素添加 word-break: break-all,强行换行
  • 解决这类问题,便是不用这种方式进行居中形式,换另一种

      top: 0;
      left: 0;
      right: 0;
      bottom: 0

    技术分享图片

    如此便不会只有父元素的一半宽度了

绝对定位left:50% 隐式设置了宽度

原文:https://www.cnblogs.com/sinosaurus/p/11277057.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!