文字模块一直居中，包括多行

最新推荐文章于 2024-01-31 18:30:00 发布

原创最新推荐文章于 2024-01-31 18:30:00 发布 · 706 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

15 篇文章

订阅专栏

本文展示了一种使用HTML和CSS实现的支付提示框样式设计案例。该案例着重于响应式布局，确保了不同屏幕尺寸下的良好显示效果。通过设置字体大小、边框样式等属性，实现了简洁明了的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
<style type="text/css">
html {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
.payment_tips{width: 12rem;display: table;font-size: 1.1rem;height: 3rem;line-height: 1.3rem;border: 1px solid #ccc;}
@media only screen and (max-width:375px){
.payment_tips{width: 11.3rem;}
}
.payment_tips .pay_content{text-align:left;display:table-cell;vertical-align:middle;}
</style>
</head>
<body>

<div class="payment_tips">
<div class="pay_content">请在24小时内支付</div>
</div>
<div class="payment_tips">
<div class="pay_content">请在24小时内支付请在24小时内支付</div>
</div>

</body>
</html>