Vue文本设置

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&amp;iar=0&amp;w=1140&amp;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>