1
我正在嘗試對齊圖像旁邊的一段文字。然而，圖片停留在頁面的底部，而文字略高。我不太確定該怎麼做。感謝您的時間！如何對齊圖像旁邊的圖像？
HTML CSS &
body {
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
font-family: monospace;
font-size: 15px;
text-align: center;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 75px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
font-size: 20px;
}
img {
position: relative;
display: block;
}
h2 {
position: absolute;
top: 190px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h3 {
position: absolute;
top: 265px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h4 {
position: absolute;
text-align: center;
font-family: sans-serif;
font-style: italic;
width: 100%;
font-size: 60px;
top: 700px;
}
h1{
font-size: 20px;
font-family: 'Roboto';
position: absolute;
text-align: left;
top: 900px;
margin-left: 150px;
margin-right: 150px;
}
#pformat{
text-align: right;
font-family: sans-serif;
margin-right: 30px;
font-style: italic;
font-size: 55px;
margin-left: 620px;
}
#opaque {
opacity: .2;
}
#divp {
font-size: 20px;
font-family: 'Roboto';
position: absolute;
text-align: left;
top: 1000px;
margin-left: 150px;
margin-right: 150px;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<title>
</title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
<a href="test_webpage.html#about">ABOUT
</a>
</li>
<li>
<a href="test_webpage.html#coupons">COUPONS
</a>
</li>
<li>
<a href="test_webpage.html#feedback">FEEDBACK
</a>
</li>
</ul>
<img src="https://preview.ibb.co/dr3y7v/vintage.png" height="660px" width="100%">
<h2>
<span style="background-color: rgba(26, 102, 255, 0.75)">BRINGING YOU CONVENIENCE
</span>
</h2>
<h3>
<span style="background-color: rgba(26, 102, 255, 0.75)">SINCE THE 2000's
</span>
</h3>
<div id='about'>
<a id="about" name='about'>
<div id='opaque'>
<img src="https://preview.ibb.co/bS5nja/gas_station_hero_image.jpg" height="600px" width="100%">
</div>
<h4>WHO WE ARE
</h4>
<h1>We are a small convenience store located in the heart of Cary, North Carolina. We specialize in craft beer and exquisite wine. We have all your quick grocery needs. We have the best prices in our area guaranteed! Come visit us for a truly enlightening experience! We are on Google so if you want to see our reviews or give us one, you can!
</h1>
<div id='divp'>
<p>You might be wondering, why should I come here? What makes this gas station different from other gas stations? Well, with excellent staff, low prices, and clean floors, the better question should be, why shouldn't I come here! We hope you come to our store and have a fabulous experience. If you do experience any difficulties during your time here, please feel free to contact the Manager. He will resolve your complaints in no time!
</p>
</div>
</a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'>
<div id='pformat'>
<p>Here is a coupon just for you! Simply open the QR code and show it to the cashier so he/she can scan it!
</p>
</div>
<img src="https://preview.ibb.co/jBYUxv/coupon1.png" height="300px" width="600">
</a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a>
</div>
</body>
</html>編輯：對不起，這是不明確的，但我takling約在頁面底部的QR碼圖像！感謝您的理解。
你能解釋litbit更多？ – LKG
你的意思是？ – itacode
我編輯了這個問題，但我正在討論頁面底部的QR碼圖像。對不起，缺乏清晰度。 –