如何让多个li标签中的img图片的水平中线对齐?

发布于 2022-09-13 00:18:54 字数 8872 浏览 16 评论 0

如图所示,ul中有多个li,每个li中有一个img 图片,这些图片的宽高不相同,如何让这些图片的水平中线对齐,在同一条直线上?
image.png

<ul class="nav nav-tabs"> 
<li ><img title="二极管"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAWCAYAAAC7ZX7KAAAA30lEQVRYR9WXsQ3CQAxFX8QiMAGLsEEWoYCOgjUoqGhZJBPAIghkdJYORIIdEnK+Js39+Mn598+pCLaqHrwn4ACce2h/lniB71nFI7AFLkYK1XprvrzeK9aiN2AGyHMD7A3QkwIvgB1QJ9AmgXfZZFJg/TKrBL5M4GIT6fj1Q8eLAFaudQLvsklRwAI+/2KT4oC122020TTxHvRBUsJS9N0mYhdZFm1r6OTiPGMNKfX3LU/W0MCWlnkOzuiWGAo4zKELFWthLo4wV3O44SfceCmJEmKAF9BQv0iWrB51zwMXrU4XJT+CsAAAAABJRU5ErkJggg=="></li> 
<li><img title="理想二极管"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAwCAYAAACsVQxYAAABNUlEQVRoQ+2Y4QnCMBBGv07oKjqBuoFuoJvoBm6iTqAcJCAlxhy01nqv0H9paF7ed5e2E1eRQAeXMgHAvDEDMIDxFQ2MwRiM8RHAGB8vaswExiwlXSUdfXultaRNurfOZwcbPqYxtjhb5EnSStKl8a3DgMk8dpLMgNsHQOHAGA+DYhGrxSskmCxLLV6hwdTiBZhEpx8vwPSKcI7XYm7t+tHYbqcaNujRwzMZYAba8nzAa53unFr57KLUusA8rhXMPQE5pAcpvpL2qdC+noZDg8mxKX0/hQTTj00pnuHAlGITGkwtNiHB2Fe0FdXcbVq72t9HqRXET47znHx/cgFjvRRgJvgZPtZmfmVejMEYn2gYgzEY4yOAMT5e1BiMwRgfAYzx8aLGYAzG+AhgjI8XNQZjfMY8AdsUTjH786IiAAAAAElFTkSuQmCC"></li> 
<li><img title="NPN型三极管"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAABACAYAAABhspUgAAABoElEQVRoQ+2ZwU3EMBBFX2qgAziCRANwpg7oALjSwi4dQB9coQCQ4EoH1LBooswqWFnLxB7HkSbnXefl+XsydjpWdnUr42UtwLtBbOfARhFzw0Zi98O6YTccGPBIeCQ8EtYZcMMVDV8DT9bd2r5uZjzYDXALnA1jXAEvVu1lDnAI+gVsgGcBbwlYQO+A08HoH1CdqRaAk0BbAA5BP4GtTv2h7C9heBboEoalPN2PMppkNDRdw3AR0FqGZaXrqp9ltLZhuV8R0FqGZYH1Bb/UVSPDpVj7cRx40JnTS0RnZGxYb1JyCovP4KqBS5qtEgkHtqhCxRdFUCVW9+LQV/PjaCOZFT1rw2Hzkw1uDSzjh+2lPITsLHTr/i/jNYAVaC74OfBRq1ubEiLgsjvW84aY8XdAgC+Bt6WbnxRwOY+Qh5MIyfaqiW5tClwPTi6AV+AbOGkFeJzxMCoC/gAcayxqLrrUahAa/wGONBYtAh9qc/tYWAGn2pz6Xawv94/jOWZj//XvdFZmdVw37IYDAx4Jj4RHwjoDbtgNJxposR+Oov8C90p+QUETankAAAAASUVORK5CYII="></li> 
<li><img title="PNP型三极管"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAABACAYAAABhspUgAAABvUlEQVRoQ+2ZwU3EMBBFX2iACxdqAHGiB7gBogIoAAmoA5AoADpAiNsiyoAjrQCalR1lzRJsr8cbS5Nz1n55/h6NvR2NPV1jvLQC/O3EdgasFDEzrCS2H9YMm+HAgEXCImGR0M6AGa5o+Ax40O7W+rq5woedA5fArhvjAHjVai9XAQ5BP4Ab4FHApwQsoFfAjjO6AOpXagrAUaBTAA5B34Fbv/R/ZX8dhrNA12FYytP1IKNRRkPTNQwXAa1lWHa63/VZRmsblvmKgNYyLBtsXvBLPTUyXIp1Po4BO52r9BKjKzI07CcpuYTFV7Bp4JJmq0TCgDWqUPFNEVSJsVXLmjvrRxHZiak4WXNn/SgB+AvYcO9LT3E3OAFHDPP7FW1gmfEN2A7OanKy8Ef3JPAawAK0D+wFDby0nsng2sD3wAXwAhw5ldLQy+nY3zckgWsDbwGfwCZwCjwN1j8LXBtYxhebchHyDJwsCewy8P7ipPaJwws5dsBjGywKvIbhpCoAjIJPEdh/YAh+CMy0gFOt/hcV9evWksAylv3tVdpoOJ4ZNsOBAYuERcIioZ0BM2yGxw00V4f7z2mhH15w/wMem3pBJXO/BgAAAABJRU5ErkJggg=="></li>
<li><img title="变容二极管"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAYAAAAkjjtxAAABS0lEQVRYR+2XMW7CQBBFHy05AU0KcoekS0efM3AD+kQJIn1uwEU4AdwBChpOAG2iiWYlY7zYY69sj+StXMzuPn39P54d4WyNGvC+Am/AB3BucI5pa13gL+BTbzoB78C64s1h7xKQb9NqCrwHnvTGjaq9LSHoFFhUOgLfwERBf0ps0jmwAIwVelHBJr0ADi54VvBZxibi713GJr0CDlzzApsI+EWDJoHtJHT3Ln0AVkDeJo/aYXoHHLPJAZimUPjX1BDbL/5vwdk+7A7Yopkl6S/q5dA5klkiNbCr0Llpa25+HK5+za6Gn5B4CayMl/m5oSjIlg5zs7/pPCwHuhjgBdTyRIqpala7rsKWni21A7BVMWv9oLBVsVh99vlfVJMf2q31V+NlCmgrgLU+OXCZ8jGFKz+XhrYWkXjoEikCd+8MdwonE6St0CUD/gOhz5ojEffKkgAAAABJRU5ErkJggg=="></li> 
<li><img title="齐纳二极管"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAWCAYAAAC7ZX7KAAAA7UlEQVRYR9WXsRHCMAxFX45FYAIWYQMWoYCOgjUoqGhZhAlgEQ5OnHVnuMSRY0MiN2ms6EX5+rIbnK1mAO8ZOAKXAbHFIbnAzyjjCdgBNyOFxubm/Hh9brAmfQAzQJ5b4GCAHhV4AeyBdQC9BvCUTEYF1j+zCuDLAC4ykYrfWyo+CWDl2gTwlEwmBSzg8x6ZTA5Yq90lE3WT3Eav4hKWpN8yEbnIssR2mk4cHHuswaX+vuXN6hrYUrKcxvm5JGoBu2k6V7bmZnC4Gc3uDj/ujpfiKG0HeMvwqTbpLLYme1JXpD7gItjiuW79wpr7XkWATxflUqLdAAAAAElFTkSuQmCC"></li> 
<li><img title="N沟道增强型MOSFET"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAYAAABRPoQBAAABTklEQVRoQ+2YwQ6CQAxEh/gl/o9XTx78EY8e/Bh/0WggQNBEMivd7NgMFy5l6czrlqUdkl5dUl3IJuw5guos7E9K1sT+BNScpomZmIgDLkUREHQaJkZbJRJoYiIg6DRMjLZKJFCG2JxIkDEWFmTk12XSE4s2sNpogCUxxUUKG8YdtWYepcLC8whfcLTewqZxWWQtKpRitJ55vdalmFbY5148ADgDOG5V3JrYJGwP4ArgNArqhd23iFMR9gCwA9DfLwBuW0QpNI/0H+itgJbPS5080pZi2uYxNbE07T5yb72t1brdpxXG/gUUG9CamIWVIlsSq3YKWEmq2jtrCmPKvIaw4ajIvLy0Ckrio/eYB6Yl7v8Sm5bYL2asPSNTihZGOmBipFEyYSYmg4JMxMRIo2TCTEwGBZmIiZFGyYSZmAwKMhETI43SC2s986jmyAuTNV9BrDNyiwAAAABJRU5ErkJggg=="></li> 
<li><img title="N沟道耗尽型MOSFET"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAYAAABRPoQBAAABTUlEQVRoQ+2YMQ6CUBBEh3gS72NrZeFFLC08jFc0GpRPwEQzH/Ynw2ZsaBb+zrzJCtsh6a9LqgvZhD0HUJ2FbSSyJrYRUGObJmZiIg44iiIg6DZMjLZKpNDEREDQbZgYbZVIoQyxsZEgYywsyMifj0lPLNrAZqsBlkSpixT2Xne02nnUCgvvI/yBg/UWVtZlkVl0FBe46Sh+RfEA4AzguMDM2S0qw2MP4ArgNHTXC7uvEaci7AFgB6C/XgDc1ohSGh5rdUzvl/qDTissbRTTDo8yxNKN+/DpHP5AvwR/HGBfvaqnpolVWsaSYOsqj59/QTf7TP/TVbMzp1GMPoSJefSZxcNmyxw2OtFR9MKUdX5pXVpiSw35dZ9MFC2MdMDESKNkykxMBgXZiImRRsmUmZgMCrIREyONkikzMRkUZCMmRhqlV8YsXPS6Jjp6ActpY0EraTe0AAAAAElFTkSuQmCC"></li> 
<li><img title="P沟道增强型MOSFET"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAYAAABRPoQBAAABV0lEQVRoQ+2YUQ6DMAxDw2W3M2132pk2ZaJoSLC6VSrcyP0ltLGfAZHFkq4lqS7LJuy9glokbJLIitgkoLY2RUzESBxQFElAwG2IGGwVSaGIkYCA2xAx2CqSQhpiWyNBxkhYkJGn26QnFm3gsNEASqLURQr7jjtGzTxahYX3Eb7har2ElXFZZBYZohitZ9vv6iimFYY+i8WAh5k9zexVc+RqYi3CbmbmwnzdV4Gn+mYS5iJcmAv05eRc4OFiEVZLVst1qg90S+O1WiphaHKmiyIiLP3LY4rXfe156b6ORKBn85bvU8/+1XuuFjbMAAmrst8XoCTQusbj93/Qw37T/3Q17MzfKEYfgsQ8+szi4bBhDhqd6ChqYIo631uXllivIWf30URRwkAHRAw0iqZMxGhQgI2IGGgUTZmI0aAAGxEx0CiaMhGjQQE2ImKgUXxlyMCFr2ugow/lZ19B4x/AJgAAAABJRU5ErkJggg=="></li> 
<li><img title="P沟道耗尽型MOSFET"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAYAAABRPoQBAAABSUlEQVRoQ+2YUQ7CMAxDs8vCmeBOnAkU2CYmUepMqeRG7u+yNvYzY8tiRddSVJdVE/ZcQS0SNklkRWwSUHubIiZiJA4oiiQg4DZEDLaKpFDESEDAbYgYbBVJIQ2xvZEkYyQsycjmNuWJZRs4bDSAktjqMoW9xx2jZh5RYel9pG+4Wi9h27gsM4uK4gk3FcVgFG9mdjezR8/smR4eFzNzYb6uq8CmvpmEuQgX5gJ9OTkX+HOxCOslK3Kd6g860nivlkoYmpzpoogIK//wKPe47/22DteRCIQ21EvwxwH01StsrogFLUNJoHXB449f0MM+0/90NezM7yhmH4LEPPvMzcNhwxw0OtlR1MAUdf5sXVliZw1p3UcTRQkDHRAx0CiaMhGjQQE2ImKgUTRlIkaDAmxExECjaMpEjAYF2IiIgUbxlSEDF76ugY5eHapjQSf8RooAAAAASUVORK5CYII="></li> <li class="img-li"><img title="N沟道JFET"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAYAAABRPoQBAAABT0lEQVRoQ+2YwQ3CMAxFf/diAY4MwVQwBJy4wwLMwo0TKFWoIlAlO7KDE31ulZyv/P9cV3jCoL9pUF8Yzdgrg5porJOWJbFOQC3XJDESC5IAWzEICPE1SEwcVZBCEgsCQnwNEhNHVVm4JFx5/vtYGGI0JiRKYsKgqss+CVcLrBz8+2rAw9i87vj3zsN6eCwAacz6Jch6JKYNlq2oTUxYz1YUBsWpqA1KW89W1CbGqahNTFjPVhQGxamoDUpb330rXgGcABwBPAr3XRvbALhlM89sLhm8A+jaWPK0A7AHsC1oXYpn889OKejxN137zlnU/6wGRjE2rzzMW2Al8lat2HSv2HJ4NDWWIKZxfwZwcB73zY2tDQXrcR/GmMUULDVozDpRbz0S807YWp/ErBP11iMx74St9UnMOlFvPRLzTthan8SsE/XWG5ZYmBW3G8E3G75UQUaRZ7cAAAAASUVORK5CYII="></li> 
<li><img title="P沟道JFET"    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAYAAABRPoQBAAABT0lEQVRoQ+2YUQrCMBBEp1+CF/EGHkBQ8Ah6QL2DHsET+aW0xFK0wk5Imk0YoX+TsjNvs9Tt0Oiva9QXWjP2CqA6GaukZUWsElBjmSImYk4SUCs6AWEuQ8TMUTkRipgTEOYyRMwcVaRwTDjy/PcxN8RkzEhUxIxBRcs+CUe/4M/B4quBHMaGdUfpnUfq4TEClLHUlyC8T8TYYNWKbGJGvVrRGJSmIhsUq1crsolpKrKJGfVqRWNQmopsUKy+ylbcADgDOALY/nFcjbE1gFMwtJuY6Y09Zsy5N7YPZnpTq2DgCeAanltJYjn+prN3LoX+ZzXQirFh5ZHqy+MQ7tZcK14A3BdqxWx7xdLDI5uxKZgS434RY5ZBkHrcuzFmMc9oZIxJy4NWxDxQYGoQMSYtD1oR80CBqUHEmLQ8aEXMAwWmBhFj0vKgbZaYmxV3NspvwSdSQfQkokAAAAAASUVORK5CYII="></li> 
<li><img title="桥式整流电路"   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADuklEQVR4Xu3drY4VMRQH8P9a8CQYBLwABnA4gkHwDEgcHgIEPA7JU6whPAFgeAEQGBI8WEjZNhkm05nT0/PVuXPVZm972v5ue9qZ3Zs5w/ESFTgTjaYT7AqAxzn0WwA/dZqRiRodNGGeA7iVh/sZwIPIqJFBp5hfMuhNAKFRo4JOMQtgMi2zNSxqRNAlzJI3196TSYKdUaKBUsAoZTpZ+NUjgbZAtZTl6zBqRgHlAHHqMIjaqkQA7YHpqdsmRSztDSoBIhGDyLVdzBNUEkIy1rbaSgkvUA0AjZjNuB6gmgPXjE3CtQa1GLBFG1VcS1DLgVq29R+uFajHAD3ahAWoy8DytDFvWxvUfEALyc20D5qgpgPZ2ILN+qIFajYA0lnmopBJnzRATTreADktqt43aVD1DjMhzVAlQUfALLBqfZUCVeugwIyshVDpswSoSscUIVWXfy/oyJgqy78HdA+Y4qhc0D1hiqJyQPeIKYbaCrpnTBHUFtBTwOxGpYJaYN4F8BDAMwC/jI5Na82wxkwBZQVuBHkB4Hmu8wPAUwDviDFK3ZcA0s+Sr+axb4E2B2SOpqB8BXAjx/iQZ+vHjZiaoM13qdZArTBTp6co3wG8BnA1Q77ZSAPaoE2oNVBLzDloArqUUZ8Q0oAFKBl1CdQacwm0rPLbGfbeJA2k/PppkgasQEmoc1APzDXQ4vZoIQ0k2N+zdCG9KS2l71WjKagXJgU0lbkM4BWAeRq4lk8IGrt8bT+sWhVQT0wqaC0NfANwHYAlaHX5F9CSh9K3Le4LfW3lD/MIZVVt68hI6UeaiO8BpG+n/PtAD1AKW71MFXSkJX8n59Ky84dc8qQjQd+HuVqbcvQZalMqo/WaqVugQx6bPFFroMMf7L1Q56C7uvT0QN39zRFr1AJaduzUfrp9N79uX9rZtvJv717atK9QDrdNAZm9P5kbzJYz9WT+BGKJypzg4tXYq5Ky5Ke9ZTckPmS9gF1jbAX1vqLSY7yI3IWZAnBARRrWlmHE78bsAd0bqghmL+heUMUwJUBHRxXFlAIdFVUcUxJ0NFQVTGnQUVDVMDVAo6OqYmqBRkVVx9QEjYZqgqkNGgXVDNMC1BvVFNMK1AvVHNMS1BrVBdMa1ArVDdMDVBvVFdMLVAvVHdMTVBo1BKY3qBRqGMwIoL2ooTCjgHJRw2FGAm1FDYkZDZSKGhYzIugWamjMqKA11PT749EVSYH5ms7G4+EqTMR5tSlqei/sQ1VKx7n/iiPkRQqTUI8HVJGodljoL7HUQHMTKr4cAAAAAElFTkSuQmCC"></li>
</ul>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

诗化ㄋ丶相逢 2022-09-20 00:18:54

可以用 flex 布局:

.nav-tabs{
  display: flex;
  align-items: center;
}

我试了一下,个别图片中的图形不在图片中央,所以会偏移,需要对这些图片进行编辑。
用 CSS 也能做到,但是需要一个个去设置(margin-top 或者 translate),并且不能通用,不建议。

滴情不沾 2022-09-20 00:18:54
ul,ul li{
  display:flex;
  align-items:center;
  height:100px;
}
ul li img{
  max-height:100px;
  max-width:100%;
}
苏大泽ㄣ 2022-09-20 00:18:54
img {
    vertical-align: middle;
}
梦里°也失望 2022-09-20 00:18:54

vertical-align: middle;

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文