【Css/小程序】如何实现div或view中的文字左右居中和垂直居中？（已解决：多行和单行自适应）_小程序view居中

作者：笔触狂放9 | 2024-04-21 00:20:50

踩

小程序view居中

一、效果

1、多行居中效果

2、单行照样居中效果

二、代码


<view class="title">
  <view class="word">
    大众ABS传感器速腾迈腾途观新捷达CC一汽高尔夫6明锐前后轮速原厂
  </view>
</view>


 
.title {
  width: 100%;
  height: 55px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 10px;
  background-color: rgb(255, 255, 255);
}
 
.word {
  width: 96%;
  /* height:40px; */
  height:auto;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

三、自适应的div里实现上下左右居中


<html>
<body>
 
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="right">
    <div class="content">
      通过这种方式，左边两个子div的宽度将保持不变，右边的子div将自动适应父容器中剩余的宽度。你可以根据自己的要求，修改示例中的宽度和背景颜色等样式属性来适应你的需求。
    </div>
  </div>
</div>
</body>
<style>
.parent {
  display: flex;
}
 
.child {
  height: 80px;
  width: 200px;
  background-color: antiquewhite;
  border: 1px solid #000;
}
 
.right {
  height: 80px;
  flex-grow: 1;
  background-color: rgb(220, 220, 243);
  display: flex;
  align-items: center; /* 垂直居中 */
}
 
.content {
  margin: 0 auto; /* 左右居中 */
  text-align: center; /* 文本居中 */
}
</style>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/460123