将图与标题对齐答案

【问题标题】：Aligning Figures with captions将图与标题对齐
【发布时间】：2014-01-23 11:42:51
【问题描述】：

我正在制作一个快速网站，我希望在每张图片下方添加一个标题，其中包含图片中每件商品的价格。我在每张图片下面都放了一个标题，但是我希望它们垂直对齐，但目前它们是水平对齐的。有人可以帮帮我吗？

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

【问题讨论】：

标签： html css alignment figure caption

【解决方案1】：

只需添加：

.figures figure {
    display: inline-block;
}

JSFiddle demo.

【讨论】：

【解决方案2】：

尝试添加这个：

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

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

JSFiddle

【讨论】：

这不是问题所要求的。然而，作为一些建议，重复相同的 CSS 声明是没有意义的，您应该只使用两个用逗号分隔的选择器：figure img, figure figcaption { ... }
“我在每张图片下面都放了一个标题，但是我希望它们垂直对齐，但目前它们是水平对齐的。”问题很模糊。我读到 图像和标题 应该是 v-aligned...而不是数字。