如何解决将 3 元素块与页面中心的左侧对齐
我是初学者,我想做以下事情,但我不知道如何正确地做。
无论屏幕扩展如何,我都需要使用第二个文本和一个按钮(具有文本区域类的块)使文本居中。
通常,我希望带有第二个文本和按钮(文本区域块)的文本始终位于同一位置,而不管方向(纵向/横向)如何。有没有简单的方法可以做到这一点?
*{
margin: 0;
padding: 0;
}
body{
min-height: 300vh;
background-color: #1D1D1D;
z-index: -2;
}
.section{
position: relative;
height: 100vh;
}
.text-area{
position: relative;
}
#index-title-main{
color: #fff;
font-size: 55px;
height: 150px;
}
.index-form-link{
display: block;
max-width: 250px;
margin-top: 50px;
padding: 10px;
color: #35E6BA;
font-size: 25px;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
border: 1px solid #35E6BA;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-ms-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}
.index-form-link:hover{
background-color: #35E6BA;
color: #000;
font-weight: bold;
}
.index-backdev{
color: #555;
font-size: 24px;
margin-top: 20px;
margin-bottom: 20px;
}
<section class="section">
<div class="text-area">
<div id="index-title-main">Hi!<br>I am someone,and I am doing something.</div>
<a class="index-img-content-link" href="/works.html"><img class="index-img-content" src="img/t-index.png" alt=""></a>
<h5 class="index-backdev">Second text</h5>
<a class="index-form-link" href="">Btn text</a>
</div>
</section>
解决方法
尝试将您的代码更改为此行 #index-title-main
在您的 css 文件中
#index-title-main{
color: #fff;
font-size: 4em;
display: block;
overflow: auto;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。