CSS实现图片与文本的居中对齐的常见方式 - 友情链接前面的图标如何与文字上下居中对齐

2022年09月02日 技术资料 881 views 0

最近修改我网站的友情链接,增加了favicon.ico图标,但是图标和文字无法居中。

增加 top: 3px; 可以让图片和文字居中,但这种方式太固定,如果图片的尺寸变了,那么将有需要调整了。



1.为图片和文本都设置vertical-align:middle

<style>
   .d1>* {
       vertical-align: middle;
   }</style>
<div class='d1'>
   <img src='./1.jpg' width='100'/>
   <span>这是一段文本iT猫itcat.cn</span>
</div>



2.通过弹性布局实现,外层容器设置弹性布局,通过align-items: middle设置交叉轴居中对齐

<style>
   .d1 {
       display: flex;
       align-items: center;
   }</style>
<div class='d1'>
   <img src='./1.jpg' width='100'/>
   <span>这是一段文本iT猫itcat.cn</span>
</div>



3.借助于背景图片实现,这时只需要文本居中即可

<style>
   .d1 {
       height: 133px;
       background: url(./1.jpg) 0 0 no-repeat;
       background-size: 100px 133px;
       padding-left: 100px;
       line-height: 133px;
   }</style>
<div class='d1'>
   <!--<img src='./1.jpg' width='100'/>-->
   <span>这是一段文本iT猫itcat.cn</span>
</div>



4.图片与文本左浮动,同时设置容器元素的line-height

<style>
   .d1 *{        float: left;
   }
   .d1 span {
       line-height: 133px;
   }</style>
<div class='d1'>
   <img src='./1.jpg' width='100' height='133'/>
   <span>这是一段文本iT猫itcat.cn</span>
</div>



5.文本设置为行内块,图片垂直居中对齐

<style>
   .d1 img {
       vertical-align: middle;
   }
   .d1 span {
       display: inline-block;
   }</style>
<div class='d1'>
   <img src='./1.jpg' width='100' height='133'/>
   <span>这是一段文本iT猫itcat.cn</span>
</div>

👍好活当赏🧧