在HTML中，行内元素（inline elements）是指那些不会独占一行的元素，如<span>、<a>、<img>等，默认情况下，行内元素的居中方式与块级元素（block elements）不同，因为它们不受display: block;属性的影响，要实现行内元素的水平居中，可以采用以下几种方法：
1、使用text-align: center;属性：
将行内元素的父元素设置为居中对齐，这样所有子元素（包括行内元素）都会水平居中。
<div style="text-align: center;"> <span>这是行内元素</span> </div>
2、使用Flexbox布局：
Flexbox是一种强大的布局工具，可以轻松实现各种复杂的布局需求，通过将父元素设置为Flex容器，并设置justify-content: center;属性，可以使所有子元素（包括行内元素）水平居中。
<div style="display: flex; justify-content: center;"> <span>这是行内元素</span> </div>
3、使用display: inline-block;属性：
将行内元素设置为display: inline-block;，这样它们既具有行内元素的特性，又具有块级元素的特性，可以通过设置margin: 0 auto;来实现水平居中。
<span style="display: inline-block; margin: 0 auto;">这是行内元素</span>
4、使用绝对定位（Absolute Positioning）：
通过绝对定位，可以将行内元素放置在其父元素的中心位置，需要给父元素设置一个相对定位（position: relative;），然后给行内元素设置绝对定位，并设置left: 50%;和transform: translateX(-50%);属性。
<div style="position: relative; width: 100%;"> <span style="position: absolute; left: 50%; transform: translateX(-50%);">这是行内元素</span> </div>
5、使用表格单元格（Table Cell）：
将行内元素放入一个表格单元格（<td>）中，然后通过设置表格的宽度和单元格的居中对齐来实现水平居中。
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
<span>这是行内元素</span>
</td>
</tr>
</table>
6、使用CSS Grid布局：
类似于Flexbox，CSS Grid也是一种强大的布局工具，通过将父元素设置为Grid容器，并使用place-items: center;属性，可以使所有子元素（包括行内元素）水平和垂直居中。
<div style="display: grid; place-items: center;"> <span>这是行内元素</span> </div>
以上就是实现HTML行内元素水平居中的几种方法，在实际开发中，可以根据具体需求和场景选择合适的方法，需要注意的是，不同的方法可能在不同的浏览器和设备上有不同的表现，因此在设计布局时，要充分考虑兼容性和响应式设计。