css中圖片居中顯示的程式碼怎麼寫

CSS 中可使用以下程式碼水平居中圖片：設定容器元素 text-align: center;。將圖片設為內嵌區塊級元素 display: inline-block;。使圖片垂直居中 vertical-align: middle;。垂直居中圖片：將容器元素設為 flexbox display: flex;。使子元素垂直居中 align-items: center;。使子元素水平居中 justify-content: center;。限制圖片大小max-width: 100%;，max-height:

#CSS 中圖片居中顯示代碼

#問題：如何使用CSS 程式碼讓圖片在元素中水平和垂直居中顯示？

回答：

水平居中

.image-container { text-align: center; } .image { display: inline-block; vertical-align: middle; }

#垂直居中

.image-container { display: flex; align-items: center; justify-content: center; } .image { max-width: 100%; max-height: 100%; }

• #詳細說明：
• 水平居中

將image- container元素設定為水平居中。

• display: inline-block;將image元素設為內嵌區塊層級元素，允許它與文字對齊。
• vertical-align: middle;將image元素在垂直方向上居中，與 surrounding text 對齊。
• 垂直居中
• display: flex;將image-container元素設為 flexbox ，允許對其子元素進行靈活佈局。align-items: center;將image-container
元素中的所有子元素在垂直方向上居中。

以上是css中圖片居中顯示的程式碼怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！