我正在尝试将位于导航栏正下方的横幅 img 居中。我想把文字放在上面,左对齐。 我已经能够做到这一点,但图像上的文字根本没有响应。如何使文本在浏览器更改大小时更改大小?另外,我认为我的 CSS 无处不在,所以如果您对此有任何建议,我们将不胜感激!
这是标记:
.topimage img {
position: relative;
width: 100%;
padding-top: 10px;
}
li {
list-style-type: none;
}
h1 {
z-index: 100;
position: absolute;
color: #272727;
font-size: 45px;
font-weight: normal;
left: 650px;
top: 250px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle p {
z-index: 100;
position: absolute;
color: #272727;
font-size: 17px;
font-weight: normal;
left: 650px;
top: 390px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle ul {
list-style-type: none;
}
a {
text-decoration: none;
}
.maintitle li {
z-index: 100;
position: absolute;
color: #272727;
font-size: 15px;
font-weight: bold;
left: 650px;
top: 470px;
font-family: Helvetica Neue, arial, serif;
border-style: solid;
border-width: medium;
border-color: #272727;
border-radius: 6px;
padding: 6px;
}
a:visited {
text-decoration: none;
color: #272727;
}
.maintitle a:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
.maintitle li:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
<div class="topimage">
<img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">
<h1>Marketing Communications & <br> Digital Design</h1>
<p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
<ul>
<li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
</ul>
</div>
这就是我要实现的目标: enter image description here
最佳答案
这里有几个问题。然而,最重要的是您对 absolute
定位的使用。这是完全没有必要的。您真正需要做的就是使用 auto
的 margin
使元素居中。
在这种情况下,我们可以将它们移动到一个包装元素中,而不是分别定位 h1
、p
和 ul
。
如果你想根据屏幕宽度缩小实际字体大小,请使用 font-size: 10vw;
.wrap{
margin: 200px auto 0;
min-width: 320px;
max-width: 500px;
}
.topimage img {
position: relative;
width: 100%;
padding-top: 10px;
}
li {
list-style-type: none;
}
h1 {
z-index: 100;
color: #272727;
font-size: 45px;
font-weight: normal;
top: 250px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle p {
z-index: 100;
color: #272727;
font-size: 17px;
font-weight: normal;
top: 390px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle ul {
list-style-type: none;
padding: 0;
}
a {
text-decoration: none;
}
.maintitle li {
z-index: 100;
color: #272727;
font-size: 15px;
font-weight: bold;
font-family: Helvetica Neue, arial, serif;
border-style: solid;
border-width: medium;
border-color: #272727;
border-radius: 6px;
padding: 6px;
}
a:visited {
text-decoration: none;
color: #272727;
}
.maintitle a:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
.maintitle li:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
<div class="topimage">
<img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">
<div class="wrap">
<h1>Marketing Communications & <br> Digital Design</h1>
<p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
<ul>
<li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
</ul>
</div>
</div>
关于html - 尝试将主横幅居中,响应文本左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43918372/