发布于2024-11-01 20:28 阅读(1053) 评论(0) 点赞(12) 收藏(4)
因此,我尝试将段落置于页面中间,同时创建一些左右边距“空白处”。
我的目标是将其设置为文本框样式,并使其位于页面中央,同时在页面的左侧和右侧创建空列。我喜欢桌面模式下的效果,但它是“固定的”且不响应。当您在响应模式下调整浏览器大小时,它不会保持居中。下面是我的快速草图和我的代码,展示了我试图实现的效果。
目标:此外,当我将浏览器调整为移动设备时,我希望“文本框”开始填充边距,以便在您使用手机或平板电脑时看起来可读。奖励:我想更改文本框两侧的宽度或边距大小,使其看起来美观且与我的完整 html 文档中的其他内容均匀一致。这只是我的 html 文档的一部分。
注意:当您运行代码片段时,我建议您单击“全页”,以便您可以看到我在说什么,从而更容易地跟进。
.mainSummary {
text-align: center;
margin-left: 600px;
margin-right: 600px;
}
<link rel="stylesheet" type="text/css" href="style.css">
<div class="mainSummary">
<p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus.
</p>
</div>
Flex + 自动边距可能有助于实现您的目标。
工作示例:https ://codepen.io/cdtapay/pen/LqyaZx
.summary {
display: flex;
}
.summary__content {
padding: 1rem;
background-color: lightblue;
border: 2px solid lightgreen;
border-radius: 10px;
text-align: center;
font-size: 22px;
/* Set the desired max-width for mobile */
max-width: 250px;
margin: 0 auto;
}
<div class="summary">
<p class="summary__content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident, similique
sunt in culpa qui officia deserunt mollitia.
</p>
</div>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/534284/b460c31f61c63f65c338/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!