【CSS-03】radio+img居中对齐

最新推荐文章于 2024-06-07 21:41:20 发布

原创最新推荐文章于 2024-06-07 21:41:20 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

前端-CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在CSS中使单选按钮（radio）和图片在同一div内实现垂直居中对齐，避免单选按钮默认的下对齐情况。通过设置相关样式属性，可以达到理想效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个div中，让单选框和图片都居中，而不是单选框在下。需要对radio和img都做垂直方向居中的属性设置。
代码如下：

<style>
    input[type=radio],input[type=radio]+img{
        vertical-align: middle;
    }
</style>

   <div class="radio_container">
        <input type="radio" />test-line<img src="" style=""><br/>
        <input type="radio" />test-line2<img src="" style="">
    </div>