尝试将响应文本对齐的主横幅对齐左边

Question

我正在尝试将我的横幅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

Answer 1

这里有几个问题。然而，最重要的是您使用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>

Answer 2

* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #272727; 
 
} 
 

 
body { 
 
    font-family: Helvetica Neue, arial, serif; 
 
} 
 

 
.container { 
 
    max-width: 1024px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0 2%; 
 
} 
 

 
.topimage img { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 

 
.maintitle h1 { 
 
    position: relative; 
 
    color: #272727; 
 
    font-size: 8vw; 
 
} 
 

 
.maintitle p { 
 
    z-index: 100; 
 
    position: relative; 
 
    color: #272727; 
 
    font-size: 4vw; 
 
    font-weight: normal; 
 
} 
 

 
.maintitle ul li { 
 
    z-index: 100; 
 
    position: relative; 
 
    color: #272727; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    border-style: solid; 
 
    border-color: #272727; 
 
    border-radius: 6px; 
 
    padding: 6px; 
 
} 
 
.maintitle ul li:hover { 
 
    background-color: #6db618; 
 
    border-color: #6db618; 
 
    color: white; 
 
}

<div class="container"> 
 
    <div class="topimage"> 
 
    <img alt="plant" src="images/main.png" /> 
 
    </div> 
 
    <div class="maintitle"> 
 
    <h1>Marketing Communications &amp;<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>

Answer 3

线

我可能有了解它是错误的，但如果你想有一个背景图像ge和文本，你可以在CSS中使用背景图片。

<div class="banner"> 
    <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> 
</div> 

然后是CSS

.banner { 
    background-image:url('images/main.jpg'); 
    background-position:center; 
    position: relative; 
    width: 100%; 
    padding-top: 10px; 
} 

.maintitle { 
    width:100%; 
    blahblahblah 
... }