|
在使用CSS让图片和文字居中对齐时，我们需要考虑水平和垂直两个方向的对齐。以下是一些常用的方法和对应的CSS属性： 1. 使用Flexbox布局 Flexbox布局是一种强大且灵活的布局方式，可以轻松实现图片与文字的居中对齐。 ```css .container { display: flex; justify-content: center; / 水平居中 / align-items: center; / 垂直居中 / height: 100vh; / 示例：使容器高度为视口高度 / } .image { max-width: 100%; / 防止图片超出容器宽度 / height: auto; / 保持图片比例 / } .text { margin-left: 10px; / 图片与文字之间的间距 / } ``` HTML结构： ```html <div class="container"> <img src="path/to/image.jpg" alt="example image" class="image"> <span class="text">这是与图片居中对齐的文字.</span> </div> ``` 2. 使用Grid布局 Grid布局也是CSS中一种强大的布局方式，同样可以实现图片与文字的居中对齐。 ```css .container { display: grid; place-items: center; / 同时实现水平和垂直居中 / height: 100vh; / 示例：使容器高度为视口高度 / } .image { max-width: 100%; / 防止图片超出容器宽度 / height: auto; / 保持图片比例 / } .text { margin-left: 10px; / 图片与文字之间的间距 / } ``` HTML结构同上。 3. 使用inline-block属性 如果不希望使用Flexbox或Grid布局，也可以考虑使用inline-block属性。 ```css .container { text-align: center; / 水平居中 / height: 100vh; / 示例：使容器高度为视口高度 / display: table; width: 100%; } .icon-text { display: inline-block; vertical-align: middle; / 垂直居中 / height: 100%; } .image { vertical-align: middle; / 垂直居中 / max-width: 100px; / 示例宽度 / height: auto; / 保持图片比例 / } .text { vertical-align: middle; / 垂直居中 / margin-left: 10px;
