嘗試將響應文本對齊的主橫幅對齊左邊

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 
... }