html - 居中段落,同时有边距以创建空白空间
问题描述
所以我试图将我的段落放在页面中间,同时创建一些左右边距“空白空间”。
我的目标是将它放在类似文本框的样式中,并使其位于页面中心,同时在页面的左侧和右侧创建空列。我喜欢我在桌面模式下拥有的东西,但它是“固定的”并且没有响应。当您在响应模式下调整浏览器大小时,它不会保持居中。这是我正在尝试实现的示例,如下面的快速草图和我的代码所示。
目标:此外,当我将浏览器调整为移动设备时,我希望“文本框”开始填充页边距,以便在您使用手机或平板电脑时看起来可读。奖励:我想更改文本框任一侧的宽度或边距大小,使其与完整 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>
推荐阅读
- php - Laravel 更新表
- node.js - 错误:无法跨一对多查询属性 TypeORM
- azure - Terraform azurerm_key_vault access_policy 覆盖现有访问策略
- python - RLLIB PPO 算法中的神经网络输出
- javascript - 我是 call api 的新手,有人可以帮我解决这个问题。使用 javascript 调用 Api 链接缩短器
- node.js - 用于特定模式的 Apollo graphql typedef
- git - 推送到远程存储库上的 temp_branch 时如何解决 git push 错误?
- maven - 通过运行 Maven 任务使用 Freemarker 生成 txt 文件
- reactjs - 是否可以使用 css 模块使用具有不同 CSS 的相同 React 组件?
- python - 创建列表的嵌套循环始终在字符串中间创建新行