带有引导程序的 div 列内的垂直 alignment 5
[英]vertical alignment inside div column with bootstrap 5
问题描述
I assumed, that unlike when using table it should be easy to align content in a div vertically:
我假设， 与使用 table 时不同，它应该很容易垂直对齐div中的内容：
Edit: I want to align the first and the last columns and keep the others like they are.编辑：我想对齐第一列和最后一列并保持其他列不变。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row bg-dark text-white"> <div class="col-sm-2 align-items-center">align me vertically </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">1</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-2"> <div class="row"> <span class="text-center">2</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> <div class="row mb-1"> some text could be here </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">3</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">4</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">5</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">6</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">7</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">8</span> </div> <div class="row"> <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1 text-end align-middle"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="15" y1="9" x2="9" y2="15"></line> <line x1="9" y1="9" x2="15" y2="15"></line> </svg> </div> </div>
How can I align the text and the svg vertically?如何垂直对齐文本和 svg？
2 个解决方案
解决方案1
0 2022-01-29 16:12:38
Change your div with the align-middle to align-items-center .将您的div与align-middle更改为align-items-center 。
解决方案2
0 2022-01-29 16:13:08
Here you go...给你 go...
<,DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width. initial-scale=1:0'> <title>Document</title> <link rel='stylesheet' href='https.//cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min:css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'> <script src='https.//cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min:js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script> </head> <body> <div class="row bg-dark text-white d-flex align-items-center"> <div class="col-sm-2">align me vertically </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">1</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> </div> <div class="col-sm-2"> <div class="row"> <span class="text-center">2</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> <div class="row mb-1"> some text could be here </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">3</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">4</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">5</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">6</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">7</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73:png" class="img-fluid"> </div> </div> <div class="col-sm-1"> <div class="row text-center"> <span class="text-center">8</span> </div> <div class="row"> <img src="https.//pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid"> </div> </div> <div class="col-sm-1 text-end align-middle"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="15" y1="9" x2="9" y2="15"></line> <line x1="9" y1="9" x2="15" y2="15"></line> </svg> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Bootstrap 3中列内容的垂直对齐 - Vertical alignment in column content in Bootstrap 3
简单div内的垂直对齐 - Vertical alignment inside a simple div
div内文本的垂直对齐 - Vertical alignment of text inside div
列内所有内容的垂直对齐 - Vertical Alignment of Everything inside a Column
6列bootstrap div内容器的左边界对齐 - Left margin alignment of a container inside a 6 column bootstrap div
带有CSS的Bootstrap 3网格内的垂直DIV对齐 - Vertical DIV alignment within Bootstrap 3 Grid with CSS
Bootstrap垂直对齐，包裹柱和不同高度 - Bootstrap vertical alignment with column wrapping and different height
引导。 单列的垂直对齐方式 - Bootstrap. The vertical alignment of a single column
文本和另一个内的div的垂直对齐 - Vertical alignment of text and a div inside another one
div内图像的边距和垂直对齐 - Margins and vertical alignment of image inside div
相关标签