0
我正在製作一個快速網站,並且我想要在每張圖像下面都有一個標題的圖像,這些圖像將包含圖像中每個項目的價格。我在每張圖片下都放了一個標題,但是我想讓它們垂直對齊,但是目前它們是水平對齊的。有人可以幫我嗎?將字母與字幕對齊
我在下面附加了我的HTML和CSS代碼。
HTML代碼
<div class="wrapper">
<div class="top">
<!--Background set in CSS-->
</div><!-- end of top-->
<div class="menu">
<h1>Rosy's Jewellery</h1>
<ul id="nav">
<li><a href="index.html">Home </a></li>
<li><a href="Bracelets.html">Jewellery </a></li>
<li><a href="Locations.html">Locations </a></li>
<li><a href="ContactUs.html">Contact Us </a></li>
<li><a href="Reviews.html">Reviews </a></li>
</ul>
</div>
<!-- end of menu -->
<div class="main2">
<H1>Jewellery</H1>
<ul id="nav2">
<li><a href="Bracelets.html">Bracelets </a></li>
<li><a href="Necklaces.html">Necklaces </a></li>
<li><a href="Earrings.html">Earrings </a></li>
</ul>
<div class ="figures">
<FIGURE>
<img src="Images/Jewellery2.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery3.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery4.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery1.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery5.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery9.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery7.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery8.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
<FIGURE>
<img src="Images/Jewellery6.png">
<FIGCAPTION>Jewellery.</FIGCAPTION>
</FIGURE>
</div>
</div>
<!--close main-->
<div class="footer">
<ul id="footer">
<li> <img src="Images/facebook.png" />
<img src="Images/twitter.png" /> </li>
<li> Twitter</li>
<li> Address </li>
<li> Tel</li>
</ul>
</div>
<!--end of footer-->
</div>
CSS代碼
.wrapper {
margin:0 auto;
background-color:#D1CED4; ;
}
.top {
background-color:#000000;
padding-bottom:2.5em;
}
.menu {
background-color:#FFFFFF;
border-bottom-width:3px;
border-bottom-color:#000000;
border-bottom-style: solid;
position: relative;
top:-15px;
text-align:center;
font-family:Andalus;
font-size:16px;
padding-left:1em;
padding-right:1em;
overflow:hidden;
}
.menu h1 {
float:left;
color:#999966;
font-family:andalus;
font-size:24;
}
.main {
width:65%;
margin:0 auto;
background-color:#FFFFFF;
text-align:center;
font-family:andalus;
font-size:16px;
padding-top:1em;
padding-bottom:1em;
height:100%;
}
.main img {
margin:2.2em;
}
.main h1 {
font-size:20px;
font-family:andalus;
}
.main2 {
width:65%;
margin:0 auto;
background-color:#FFFFFF;
text-align:center;
font-family:andalus;
font-size:16px;
padding-top:1em;
padding-bottom:1em;
height:100%;
}
.main2 h1 {
font-size:20px;
font-family:andalus;
}
.figures {
display:inline;
}
{ float: left;
}
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
font-family:andalus;
}
#footer li {
display:inline-block;
padding-right:6em;
vertical-align:middle;
margin-top:-0.5em;
}
#footer img {
margin:1em;
}
#nav {
padding-top:1em;
}
#nav a {
text-decoration:none;
}
#nav a:link {
color:black;
}
#nav a:visited {
color:black;
}
#nav a:hover {
color:black;
}
#nav ul {
display:inline-block;
}
#nav li {
display:inline-block;
margin-right:4em;
padding-right:3em;
}
#nav2 {
padding-top:1.5em;
}
#nav2 a {
text-decoration:none;
}
#nav2 a:link {
color:black;
}
#nav2 a:visited {
color:black;
}
#nav2 a:hover {
color:black;
}
#nav2 ul {
display:inline-block;
}
#nav2 li {
display:inline-block;
margin-right:2em;
padding-right:3em;
}
.left {
width:28%;
float:left;
}
.right {
width:28%;
float:right;
}
form {
margin: 0 auto;
width: 400px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
margin-top: 2em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
這不是問題問什麼。然而,作爲一些建議,重複相同的CSS聲明沒有意義,您應該只使用兩個用逗號分隔的選擇器:'figure img,figure figcaption {...}' –
「我在每個圖像下放置了一個標題,但是我希望它們垂直對齊,但目前它們水平對齊。「這個問題很模糊。我讀到**圖像和標題**應該是v對齊的......而不是數字。 –