将字母与字幕对齐

我正在制作一个快速网站，并且我想要在每张图像下面都有一个标题的图像，这些图像将包含图像中每个项目的价格。我在每张图片下都放了一个标题，但是我想让它们垂直对齐，但是目前它们是水平对齐的。有人可以帮我吗？将字母与字幕对齐

我在下面附加了我的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; 
      }

来源

2014-01-23 user3227546

只需添加：

.figures figure { 
    display: inline-block; 
}

JSFiddle demo。

来源

2014-01-23 11:49:24

尝试添加此：

figure img { 
     display:inline-block; 
     vertical-align: middle; 

      } 
figure figcaption { 
      display:inline-block; 
    vertical-align: middle; 
}

JSFiddle

来源

2014-01-23 11:51:01

这不是问题问什么。然而，作为一些建议，重复相同的CSS声明没有意义，您应该只使用两个用逗号分隔的选择器：'figure img，figure figcaption {...}' –

“我在每个图像下放置了一个标题，但是我希望它们垂直对齐，但目前它们水平对齐。“这个问题很模糊。我读到**图像和标题**应该是v对齐的......而不是数字。 –

将字母与字幕对齐

回答

相关问题