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 程式碼讓圖片在元素中水平和垂直居中顯示？

回答：

水平居中

<code class="css">.image-container {
  text-align: center;
}

.image {
  display: inline-block;
  vertical-align: middle;
}</code>

#垂直居中

<code class="css">.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  max-width: 100%;
  max-height: 100%;
}</code>

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

#text-align: center;

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

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

######justify-content: center;### 將 ###image-container### 元素中的所有子元素在水平方向上居中。 #########max-width: 100%;### 和###max-height: 100%;### 限制###image### 元素的大小，使其適應## #image-container### 元素的大小並保持縱橫比。 ######

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