css --- > 伸缩布局,让图片居中
程序员文章站
2022-04-24 20:57:10
...
很明显,想要星星位于文字的正下方.
// 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常用的几种居中方式