HTML是一種用于創建網頁的標記語言。網頁設計中圖片和文字的水平居中是很常見的需求。下面將介紹如何使用HTML代碼來實現圖片和文本的水平居中。 首先，我們需要在HTML文檔中插入一張圖片。可以使用以下代碼來實現：

<img src="圖片鏈接" alt="圖片描述">

其中，`src`屬性指定圖片的URL地址，`alt`屬性描述圖片。 現在我們需要讓圖片水平居中，我們可以使用以下的代碼：

<p style="text-align:center;">
<img src="圖片鏈接" alt="圖片描述">
</p>

代碼中`style`屬性中的`text-align:center;`可以將嵌套在`p`標簽內部的所有文本、圖片等水平居中。 接下來，我們想在網頁中添加一些文本，并讓它們水平居中。以下是實現方式：

<p style="text-align:center;">這是一段水平居中的文本</p>

這里的代碼和上面圖片的實現非常相似。我們同樣使用了`style`屬性，指定了文本的水平居中。 借助這些代碼，我們現在可以將圖片和文本水平居中并添加到網頁中。使用`p`標簽來定義段落，使用`pre`標簽來顯示代碼，是Web開發中的陳舊套路，但他們具有明顯的優勢，可以區分展示和實際代碼部分，易讀易懂。