欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css --- > 伸缩布局,让图片居中

程序员文章站 2022-04-24 20:57:10
...

css --- > 伸缩布局,让图片居中
很明显,想要星星位于文字的正下方.

// html
<section id="lz_about" class="hidden-xs hidden-sm">
    <div class= title text-center">
        <h1><strong>关于我</strong></h1>
        <img src="./imgs/star.jpg" class="img-responsive" width="100">
    </div>
</section>

// 注1: hidden-xs  和 hidden-sm是在小屏幕下,隐藏的类(Bootstrap提供)
// 注2:text-center:文字居中
// 注3:img-responsive: 让图片成为响应式

CSS结构如下:

#lz_about .title{
    display: flex;
    flex-direction: center;
    justify-content: center;
    align-items: center;
}

css --- > 伸缩布局,让图片居中