对齐使用 css 制作的圆圈和文本

Question

我做了这个布局，但我找不到将圆圈和文本对齐在同一行的方法。 正如您在第一张图片中看到的那样，圆圈和文字都有问题。 我想达到你在第二张图片中看到的结果。

 * { box-sizing: border-box; margin: 0; padding: 0; }.grid { display: flex; flex-wrap: wrap; max-width: 980px; width: 100%; margin: auto; padding-top: 5%; padding-bottom: 5%; }.cell { flex-basis: 33.3%; display: flex; justify-content: center; align-items: center; }.cell:before { padding-bottom: 100%; display: block; content: ''; }.circle { width: 250px; height: 250px; border: 0.5px solid; border-radius: 50%; background-position: center; background-size: contain; background-repeat: no-repeat; box-shadow: 0px 0px 15px 0px; overflow: hidden; margin: 0 auto 1em; }.circle img { width: 100%; position: relative; height: 100%; } h3 { text-align: center; }.inner { text-align: start; padding-bottom: 15%; }

 <div class="grid"> <div class="cell"> <div class="inner"> <div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div> <div class="caption"> <h3>Chiara Bersani <br> Marta Montanini</h3> </div> </div> </div>

Answer 1

首先，您必须删除手动换行符<br> 。 执行此操作后，文本可以自动换行，而不会在特定断点处出现奇怪的断点。 如果要强制换行，请在.caption h3上使用水平padding 。

完成此操作后，只需使用align-items: self-start; 在.grid上。

 * { box-sizing: border-box; margin: 0; padding: 0; }.grid { display: flex; flex-wrap: wrap; align-items: self-start; max-width: 980px; width: 100%; margin: auto; padding-top: 5%; padding-bottom: 5%; }.cell { flex-basis: 33.3%; display: flex; justify-content: center; align-items: center; }.cell:before { padding-bottom: 100%; display: block; content: ''; }.circle { width: 250px; height: 250px; border: 0.5px solid; border-radius: 50%; background-position: center; background-size: contain; background-repeat: no-repeat; box-shadow: 0px 0px 15px 0px; overflow: hidden; margin: 0 auto 1em; }.circle img { width: 100%; position: relative; height: 100%; }.caption h3 { text-align: center; padding: 0 2em; }.inner { text-align: start; padding-bottom: 15%; }

 <div class="grid"> <div class="cell"> <div class="inner"> <div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div> <div class="caption"> <h3>Chiara Bersani Marta Montanini</h3> </div> </div> </div> <div class="cell"> <div class="inner"> <div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div> <div class="caption"> <h3>Chiara Bersani Longer TEXT...........................</h3> </div> </div> </div> <div class="cell"> <div class="inner"> <div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div> <div class="caption"> <h3>Chiara Bersani Marta Montanini more text lorem foo</h3> </div> </div> </div> </div>