【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)

阅读 105

2022-12-31


一、效果

1、多行居中效果

【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)_html

2、单行照样居中效果 

【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)_前端_02

 二、代码

<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%);
}

精彩评论(0)

0 0 举报