1.在页面中添加分栏文本+图片:
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="mini-title">
<br><br><div class="mini-title1 ">沁爽避暑,滨海玩乐<br/><br></div>
<div class="mini-title2">炎炎夏日,让我们带您远离闷热,来到滨海边的避暑天堂!我们的酒店坐落于美丽的滨海地带,为您提供清凉宜人的避暑度假体验。
步入酒店,清凉的海风扑面而来,给您带来一丝丝凉爽和宁静。我们的客房均配备了优质的空调设施和舒适的床品,让您能在凉爽宜人的环境中休息和放松。从客房窗户望出去,您将欣赏到壮丽的海景,沁人心脾。
在度假期间,您可以尽情畅游我们的私人海滩,沙滩上细软的沙粒和清澈的海水将为您带来无限的快乐。我们还提供丰富多样的海上活动,如帆船、潜水和冲浪等,让您尽情享受滨海的玩乐乐趣。
当您感到口渴时,我们的酒吧将为您提供各种清凉饮品,包括果汁、冰沙和特色鸡尾酒,为您的度假增添一丝清凉与愉悦。我们的餐厅将为您提供新鲜美味的海鲜和各国美食,满足您的味蕾需求。
无论您是想远离炎炎夏日的酷暑,还是想在海滨尽情玩耍,我们的酒店都将为您提供一个完美的滨海度假之旅。让我们一同享受沁爽避暑的乐趣,创造属于您的海滨回忆!</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
<div class="mini-title">
<img src="https://sitecore-cd.shangri-la.com/-/media/Shangri-La/Corporate/dlp/2023chinasummer/230612_Box1_FamilyFun_Desktop.jpg?h=760&iar=0&w=1140&hash=996E6773B881AD56BF0BB8997482FCEE" width="100%" height="100%">
</div>
</div>
</el-col>
</el-row>
<style>
.mini-title1{
text-align: center;
font: 25px 'Poppins-Regular';
/*margin-left: 10px;*/
/*margin-right: 80px;*/
}
.mini-title2{
text-align: center;
font: 15px 'Poppins-Regular';
margin-left: 80px;
margin-right: 80px;
vertical-align:middle
}
</style>
效果展示:
2.单文本显示,居中(这个div有点多了,如果单纯展示文本,只需要一个就可以,但是多个文本同一个设置,就需要在一个div下设多个div)
<div class="with-scroll-wrapper ">
<div class="home-card-group">
<div class="card-group-wrapper">
<div class="title-group">
<div class="title title-regular" >
<p>去赴一场与盛夏的美好之约</p>
</div>
<div class="subtitle">
<div>
<div class="dlp-rich-text ">热情的阳光传递着夏日专属的讯号——是时候放下繁琐日常,出发!去看那片向往的海,去投入青山绿水的怀抱,去探寻那座陌生的城,去品味不一样的人间烟火。即刻预订我们的心动夏日精选优惠,收获难忘的美好回忆</div>
</div>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>
.title-group .title{
text-align: center;
font: 30px 'Poppins-Regular';
}
.title-group .dlp-rich-text{
text-align: center;
font: 15px 'Poppins-Regular';
margin-left: 80px;
margin-right: 80px;
vertical-align:middle
}
效果展示:
3.设置背景图片,并且添加自适应:
<img src="../../assets/image/back.png" width="100%" height="600px"/>
4.对文字进行垂直居中vertical-align:middle
<span style="margin-left: 10px;vertical-align:middle">年度:</span>