html - 如何在居中标题的开头动态定位段落
问题描述
这个问题微不足道,但当我开始思考它时,我找不到一个简单而正确的出路。
我想让我的标题居中,然后我想让我的段落与标题的开头对齐。此外,我希望段落在所有设备上响应对齐到 770px 的标题
我想避免的
JS方法
残酷的断点方法
我想做什么
一些 sass mixin 功能
一些 HTML 容器逻辑
一些我不知道的对齐方法
默认宽度居中
宽度变大
.container .intro-panel {
width: 100%;
height: 650px;
background-image: url(https://i.imgur.com/M7gDO41.jpg);
background-size: cover;
position: relative;
color: white;
padding-top: 130px;
box-sizing: border-box;
font-family: Shrikhand; }
.container .intro-panel h1 {
font-size: 36px;
text-align: center;
letter-spacing: 20px;
text-indent: 30px;
text-transform: uppercase; }
.container .intro-panel p {
font-size: 16px;
margin: -25px 0 0 -25.5%;
letter-spacing: 2px;
text-align: center; }
.container .intro-panel .button-wrap {
width: 100%;
margin-top: 160px; }
.container .intro-panel .button-wrap .see-more {
margin: 0 auto;
width: 280px;
height: 40px;
line-height: 44px;
cursor: pointer;
font-size: 25px;
text-align: center;
margin-top: 140px;
background-color: #003DE8;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }
<div class="container">
<div class="intro-panel" data-tilt>
<h1 class="intro-name title">Edgars Pavuls</h1>
<p>Professinal Web Application Developer</p>
<div class="button-wrap">
<div class="vibrate-3 see-more">
See More
</div>
</div>
</div>
</div>
解决方案
您可以通过将标题和文本包装在 inline-block 元素中然后左对齐文本来实现此目的
请注意,如果您的文本应该比您的标题长,它将居中,并且标题与该标题左对齐 - 即最长的项目将居中
.outer {
/* put background on here */
text-align: center;
}
.centre {
display: inline-block;
text-align: left;
}
<div class="outer">
<div class="centre">
<h1 class="heading">This is some long text</h1>
<p class="text">some other text</p>
</div>
</div>
推荐阅读
- java - 在Spring Boot中将无效的json请求正文传递给rest api时没有出现异常
- javascript - 如何将数字四舍五入到整分钟?
- java - 对 ECC 公钥的长度感到困惑
- css - 如何将 innerHtml 放入 ap 标签
- php - 相同字符串之间的比较失败
- ios - 当我单击表格视图中的复选框时,一个标签内的数量应添加到 iOS 中的另一个标签
- python - 使用抛出“df未定义”错误的函数创建熊猫数据框
- django - Django:在管理页面中将 ManyToManyField 显示为表格
- html - 图片未显示在 Gmail/Yahoo 邮件中
- javascript - 使用 React 从表中删除项目后重新加载表