带标题的居中图形

Question

如果这是转贴，我很抱歉，但这是我在这里研究了一段时间的东西，我似乎无法得出正确的答案。我试图让这些图像出现在页面的正中央，并在下面加上标题，但它们一直在页面的左侧。

这是我的 html

<figure>
    <img src="apple.jpg" alt='apple/>
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>

还有 css

figure{
   display: inline-block;
   margin: 0 auto;
}
figure img{
   vertical-align: top;                 
}
figure figcaption{
   text-align: center;
}

这是我看到的：

提前致谢。我非常感谢任何帮助。

Answer 1

您希望它们水平对齐还是垂直对齐？

垂直：

figure {
  display: block;
  text-align: center
}

横向：

body {
  text-align: center;
}
figure {
  display: inline-block;
  text-align: center
}

Answer 2

更新

OP 已阐明图像将并排放置并垂直居中。

将所有内容放在 div 或部分（任何块元素都可以）
我使用了具有以下样式的 section：
- display: table; 将使其表现得像 table
- height: 100vh; 将使其与视口（您的屏幕）一样高
- margin: 0 auto; auto 会左右调整直到两者相等
在图中添加了以下内容：
- display: table-cell; 会使它像一个 table 细胞
- vertical-align : middle; 实际上会作用于 table 个细胞

更新的代码段

section {
  display: table;
  height: 100vh;
  margin: 0 auto;
}
figure {
  vertical-align : middle;
  display: table-cell;
  margin: 0 auto;
  text-align: center;
}
figure img {
  width: 20em;
}
figure figcaption {
  text-align: center;
}

<section>
  <figure>
    <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
    <figcaption>Apple</figcaption>
  </figure>
  <figure>
    <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
    <figcaption>Apple</figcaption>
  </figure>
  <figure>
    <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
    <figcaption>Apple</figcaption>
  </figure>
</section>

- 第一个 alt

缺少一个“'”（单引号）

将图形更改为block或像我一样将其删除，因为默认情况下图形是display: block。
将text-align: center添加到figure

注意：原图偏心（当然），所以我把它编辑成对称的。

请参阅下面的代码段。

片段

figure {
  margin: 0 auto;
  text-align: center;
}
figure img {
  vertical-align: top;
  width: 20em;
}
figure figcaption {
  text-align: center;
}

<figure>
  <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
  <figcaption>Apple</figcaption>
</figure>
<figure>
  <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
  <figcaption>Apple</figcaption>
</figure>
<figure>
  <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
  <figcaption>Apple</figcaption>
</figure>

Answer 3

尝试用 Div 容器包裹您的元素以控制位置。这是一种骇人听闻的方式。但是您可以调整 .center class 以将其放在页面上您想要的位置，即调整 right: and/or left 属性。

.container {
    position: center;
    width: 100%;
}

.center {
    position: absolute;
    right: 30%;
    width: 300px;
    background-color: #b0e0e6;
}

figure{
                display: inline-block;
                margin: 0 auto;
}
figure img{
                vertical-align: top;                    
}
figure figcaption{
                text-align: center;
}
</style>
</head>
<body>
<div class="container">
  <div class="center">
<figure>
    <img src="apple.jpg" alt='apple/>
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
  </div>
</div>

Answer 4

html

<figure>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <figcaption>Apple</figcaption>           
</figure>

css

figure{

                width:30%;
                display:inline-block;
               margin:1%;
               margin-left:1.5%;




}
figure img{
                width:100%;
                 display:block;
                  margin-left:auto;  
                  margin-right:auto;
}
figure figcaption{
                text-align: center;
}

https://jsfiddle.net/Ljdxnwot/3/

带标题的居中图形

Centering Figures with Captions

html

css

image

centering

更新