CSS如何讓input文本居中顯示圖片

在CSS中，我們可以使用flexbox布局來實現(xiàn)input文本居中顯示圖片的效果，下面是一個示例代碼：

HTML代碼：

<div class="input-image-container">
  <input type="text" class="input-text" placeholder="請輸入文本" />
  <img class="input-image" src="圖片url" />
</div>

CSS代碼：

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

在這個示例中，我們創(chuàng)建了一個名為input-image-container的div容器，并將display屬性設置為flex，使其成為一個彈性布局容器，我們使用align-items和justify-content屬性將子元素居中顯示，我們設置input-text的寬度為100%，以便它占據(jù)整個容器寬度，我們設置input-image的***大寬度為100%，高度自動調整，以確保圖片始終在文本框中居中顯示。