HTML 图片文字水平对齐四种方式
老牛浏览 1260评论 0发表于
html图片文字水平对齐四种方式：
1. inline-block
效果图：
HTML：
html
<h4>inline block 对齐</h4>
<div class="inline-block">
<div class="item">
<p><img src="images/1.png"></p>
<p>文字一</p>
</div>
<div class="item">
<p><img src="images/2.png"></p>
<p>文字二sdf321</p>
</div>
<div class="item">
<p><img src="images/3.png"></p>
<p>sdf321sdf</p>
</div>
</div>CSS：
css
.inline-block .item{
display: inline-block;
margin:5px;
text-align: center;
}2. block
效果图：
HTML：
html
<div class="block">
<div class="item">
<p><img src="images/1.png"></p>
<p>文字一</p>
</div>
<div class="item">
<p><img src="images/2.png"></p>
<p>文字二sdf321</p>
</div>
<div class="item">
<p><img src="images/3.png"></p>
<p>sdf321sdf</p>
</div>
</div>CSS：
css
.block .item{
float: left;
width:33.33%;
text-align: center;
}
.block img{
display: block;
margin:auto;
}3. 背景对齐
效果图：
HTML：
html
<h4>背景对齐</h4>
<div class="bg">
<div class="item item-1">
<p>文字一</p>
</div>
<div class="item item-2">
<p>文字二sdf321</p>
</div>
<div class="item item-3">
<p>sdf321sdf</p>
</div>
</div>CSS：
css
.bg .item{
width:33.33%;
float: left;
padding-top: 40px;
text-align: center;
}
.bg .item-1{
background: url("images/1.png") center center no-repeat;
}
.bg .item-2{
background: url("images/2.png") center center no-repeat;
}
.bg .item-3{
background: url("images/3.png") center center no-repeat;
}4. flex对齐
效果图：
HTML：
html
<h4>flex对齐</h4>
<div class="flex">
<div class="item">
<p><img src="images/1.png"></p>
<p>文字一</p>
</div>
<div class="item">
<p><img src="images/2.png"></p>
<p>文字二sdf321</p>
</div>
<div class="item">
<p><img src="images/3.png"></p>
<p>sdf321sdf</p>
</div>
</div>CSS：
css
.flex{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.flex .item{
flex:1;
}不同的方案有不同的适应场景呢，根据需要来。
比如有的需要居中还要支持多行的，有的只要一行的。
需要兼容 PC 或者只需要处理 mobile 的。
点赞
收藏
暂无评论，快来发表评论吧~
