對不起，如果這是一個轉發，但這是我一直在這裏研究了一段時間，我似乎無法拿出正確的答案。我試圖讓這些圖像出現在頁面正中的下方的字幕中，但它們繼續在頁面的左側。以字幕爲中心

這裏是我的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; 
}

這是我看到：提前

感謝。我非常感謝任何幫助。

來源

2016-02-26 Jordan Gates

，嘗試添加顯示：塊;並將左右邊距設置爲自動。 https://jsfiddle.net/bvabamyy/ –

我試過了，沒有任何變化 –

你想在中心或3行並排3個imgs？只有水平中心或垂直中心？ –

你想讓它們水平或垂直對齊？

垂直：

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

水平：

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

來源

2016-02-26 21:06:12

「水平」選項垂直對齊。 –

對，我把它混淆了。編輯它。感謝您指出。 –

不，謝謝！這工作很好。 –

更新

OP澄清，圖像是被並排側，垂直居中，以及。

將一切都在一個div或部分（任何塊元素都可以）
我用section具有以下樣式：
- display: table;將使它像一個表
- height: 100vh;將使它與視口一樣高（屏幕）
- margin: 0 auto;汽車將調整左，右，直到二者相等
添加以下的數字：
- display: table-cell;將使它像一個表格單元格
- vertical-align : middle;實際上將在表格單元格工作

更新片段

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>

來源

2016-02-26 21:06:24 zer00ne

嘗試用包裝容器股利的元素，以控制倉位。這是一個很好的做法。但是，您可以調整.center類以將其放在頁面上的所需位置，即調整右側：和/或左側屬性。

.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>

來源

2016-02-26 21:08:27

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/

圖IMG

來源

2016-02-26 21:14:42

這工作，但也大大擴大了圖像。有什麼辦法可以調整嗎？ –

是的可能，我用在我的項目genereally網格爲此。 –

回答

更新

相關問題