Flex justify-content center 和左/右对齐项目
[英]Flex justify-content center and left/right align items
问题描述
Need some help please.
请需要一些帮助。
Using Bootstrap 5 and I'm trying to achieve this layout alignment:使用 Bootstrap 5，我正在尝试实现这种布局对齐：
<html class="h-100" lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body class="h-100"> <div class="container h-100"> <div class="row h-100 justify-content-md-center"> <div class="col-2 border"> 1 of 3 </div> <div class="col-auto border h-100"> <svg viewBox="0 0 360 640" class="h-100" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="360" height="640" fill="#9E3D3D" /> <path d="M77.3438 279.34H55.1602V297.48H80.9297V303H48.4102V251.812H80.5781V257.367H55.1602V273.82H77.3438V279.34ZM101.074 278.848L109.512 264.961H117.105L104.66 283.77L117.492 303H109.969L101.18 288.762L92.3906 303H84.832L97.6641 283.77L85.2188 264.961H92.7422L101.074 278.848ZM147.516 303C147.141 302.25 146.836 300.914 146.602 298.992C143.578 302.133 139.969 303.703 135.773 303.703C132.023 303.703 128.941 302.648 126.527 300.539C124.137 298.406 122.941 295.711 122.941 292.453C122.941 288.492 124.441 285.422 127.441 283.242C130.465 281.039 134.707 279.938 140.168 279.938H146.496V276.949C146.496 274.676 145.816 272.871 144.457 271.535C143.098 270.176 141.094 269.496 138.445 269.496C136.125 269.496 134.18 270.082 132.609 271.254C131.039 272.426 130.254 273.844 130.254 275.508H123.715C123.715 273.609 124.383 271.781 125.719 270.023C127.078 268.242 128.906 266.836 131.203 265.805C133.523 264.773 136.066 264.258 138.832 264.258C143.215 264.258 146.648 265.359 149.133 267.562C151.617 269.742 152.906 272.754 153 276.598V294.105C153 297.598 153.445 300.375 154.336 302.438V303H147.516ZM136.723 298.043C138.762 298.043 140.695 297.516 142.523 296.461C144.352 295.406 145.676 294.035 146.496 292.348V284.543H141.398C133.43 284.543 129.445 286.875 129.445 291.539C129.445 293.578 130.125 295.172 131.484 296.32C132.844 297.469 134.59 298.043 136.723 298.043ZM169.312 264.961L169.488 269.18C172.277 265.898 176.039 264.258 180.773 264.258C186.094 264.258 189.715 266.297 191.637 270.375C192.902 268.547 194.543 267.07 196.559 265.945C198.598 264.82 201 264.258 203.766 264.258C212.109 264.258 216.352 268.676 216.492 277.512V303H209.988V277.898C209.988 275.18 209.367 273.152 208.125 271.816C206.883 270.457 204.797 269.777 201.867 269.777C199.453 269.777 197.449 270.504 195.855 271.957C194.262 273.387 193.336 275.32 193.078 277.758V303H186.539V278.074C186.539 272.543 183.832 269.777 178.418 269.777C174.152 269.777 171.234 271.594 169.664 275.227V303H163.16V264.961H169.312ZM258.469 284.402C258.469 290.191 257.145 294.855 254.496 298.395C251.848 301.934 248.262 303.703 243.738 303.703C239.121 303.703 235.488 302.238 232.84 299.309V317.625H226.336V264.961H232.277L232.594 269.18C235.242 265.898 238.922 264.258 243.633 264.258C248.203 264.258 251.812 265.98 254.461 269.426C257.133 272.871 258.469 277.664 258.469 283.805V284.402ZM251.965 283.664C251.965 279.375 251.051 275.988 249.223 273.504C247.395 271.02 244.887 269.777 241.699 269.777C237.762 269.777 234.809 271.523 232.84 275.016V293.191C234.785 296.66 237.762 298.395 241.77 298.395C244.887 298.395 247.359 297.164 249.188 294.703C251.039 292.219 251.965 288.539 251.965 283.664ZM273.832 303H267.328V249H273.832V303ZM300.059 303.703C294.902 303.703 290.707 302.016 287.473 298.641C284.238 295.242 282.621 290.707 282.621 285.035V283.84C282.621 280.066 283.336 276.703 284.766 273.75C286.219 270.773 288.234 268.453 290.812 266.789C293.414 265.102 296.227 264.258 299.25 264.258C304.195 264.258 308.039 265.887 310.781 269.145C313.523 272.402 314.895 277.066 314.895 283.137V285.844H289.125C289.219 289.594 290.309 292.629 292.395 294.949C294.504 297.246 297.176 298.395 300.41 298.395C302.707 298.395 304.652 297.926 306.246 296.988C307.84 296.051 309.234 294.809 310.43 293.262L314.402 296.355C311.215 301.254 306.434 303.703 300.059 303.703ZM299.25 269.602C296.625 269.602 294.422 270.562 292.641 272.484C290.859 274.383 289.758 277.055 289.336 280.5H308.391V280.008C308.203 276.703 307.312 274.148 305.719 272.344C304.125 270.516 301.969 269.602 299.25 269.602ZM152.859 341.367H136.406V387H129.691V341.367H113.273V335.812H152.859V341.367ZM171.703 387.703C166.547 387.703 162.352 386.016 159.117 382.641C155.883 379.242 154.266 374.707 154.266 369.035V367.84C154.266 364.066 154.98 360.703 156.41 357.75C157.863 354.773 159.879 352.453 162.457 350.789C165.059 349.102 167.871 348.258 170.895 348.258C175.84 348.258 179.684 349.887 182.426 353.145C185.168 356.402 186.539 361.066 186.539 367.137V369.844H160.77C160.863 373.594 161.953 376.629 164.039 378.949C166.148 381.246 168.82 382.395 172.055 382.395C174.352 382.395 176.297 381.926 177.891 380.988C179.484 380.051 180.879 378.809 182.074 377.262L186.047 380.355C182.859 385.254 178.078 387.703 171.703 387.703ZM170.895 353.602C168.27 353.602 166.066 354.562 164.285 356.484C162.504 358.383 161.402 361.055 160.98 364.5H180.035V364.008C179.848 360.703 178.957 358.148 177.363 356.344C175.77 354.516 173.613 353.602 170.895 353.602ZM206.859 362.848L215.297 348.961H222.891L210.445 367.77L223.277 387H215.754L206.965 372.762L198.176 387H190.617L203.449 367.77L191.004 348.961H198.527L206.859 362.848ZM238.641 339.75V348.961H245.742V353.988H238.641V377.578C238.641 379.102 238.957 380.25 239.59 381.023C240.223 381.773 241.301 382.148 242.824 382.148C243.574 382.148 244.605 382.008 245.918 381.727V387C244.207 387.469 242.543 387.703 240.926 387.703C238.02 387.703 235.828 386.824 234.352 385.066C232.875 383.309 232.137 380.812 232.137 377.578V353.988H225.211V348.961H232.137V339.75H238.641Z" fill="white" /> </svg> </div> <div class="col-2 border"> 3 of 3 </div> <div class="w-100"></div> <div class="col-auto border">text1 text1 text1</div> <div class="col-auto border">text2 text2 text2</div> </div> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> </body> </html>
Basically, there 5 divs: 3 main columns and then 2 divs wrapped underneath.基本上，有 5 个 div：3 个主列，然后 2 个 div 包裹在下面。
I want the 3 main divs to be centered and then the 2 divs underneath to be left and right aligned to the edge of the first and third columns respectively (as per image).我希望 3 个主 div 居中，然后下面的 2 个 div 分别左右对齐到第一列和第三列的边缘（根据图像）。
I can achieve the desired effect by changing justify-content-md-center to justify-content-md-between but that adds a gap between the columns, and I don't want this as the 3 main columns need to be centered.我可以通过将justify-content-md-center更改justify-content-md-between来实现所需的效果，但这会增加列之间的间隙，我不希望这样，因为 3 个主列需要居中。
I've tried to adding align-self-end and align-self-start to the bottom divs but that doesn't do anything.我尝试将align-self-end和align-self-start添加到底部 div 中，但这没有任何作用。
Thanks for the help.谢谢您的帮助。
2 个解决方案
解决方案1
0 2021-08-17 12:47:17
You'd need to separate the rows and treat the second as a flex.您需要将行分开并将第二行视为 flex。
- Remove the
col-autofrom both the elements.从两个元素中删除col-auto。 - Enclose in a
d-flexaccompanied withjustify-content-betweenas you were trying to.正如您所尝试的那样，将d-flex与justify-content-between括起来。 - Add a
px-0to remove any padding from the side.添加px-0以从侧面删除任何填充。
View here: JSFiddle Is this what you are looking for?在此处查看： JSFiddle这是您要查找的内容吗？
解决方案2
0 2021-12-22 07:06:46
Change justify-content-md-center to justify-content-center将justify-content-md-center更改justify-content-md-center justify-content-center
<html class="h-100" lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body class="h-100"> <div class="container h-100"> <div class="row h-100 justify-content-center"> <div class="col-2 border"> 1 of 3 </div> <div class="col-auto border h-100"> <svg viewBox="0 0 360 640" class="h-100" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="360" height="640" fill="#9E3D3D" /> <path d="M77.3438 279.34H55.1602V297.48H80.9297V303H48.4102V251.812H80.5781V257.367H55.1602V273.82H77.3438V279.34ZM101.074 278.848L109.512 264.961H117.105L104.66 283.77L117.492 303H109.969L101.18 288.762L92.3906 303H84.832L97.6641 283.77L85.2188 264.961H92.7422L101.074 278.848ZM147.516 303C147.141 302.25 146.836 300.914 146.602 298.992C143.578 302.133 139.969 303.703 135.773 303.703C132.023 303.703 128.941 302.648 126.527 300.539C124.137 298.406 122.941 295.711 122.941 292.453C122.941 288.492 124.441 285.422 127.441 283.242C130.465 281.039 134.707 279.938 140.168 279.938H146.496V276.949C146.496 274.676 145.816 272.871 144.457 271.535C143.098 270.176 141.094 269.496 138.445 269.496C136.125 269.496 134.18 270.082 132.609 271.254C131.039 272.426 130.254 273.844 130.254 275.508H123.715C123.715 273.609 124.383 271.781 125.719 270.023C127.078 268.242 128.906 266.836 131.203 265.805C133.523 264.773 136.066 264.258 138.832 264.258C143.215 264.258 146.648 265.359 149.133 267.562C151.617 269.742 152.906 272.754 153 276.598V294.105C153 297.598 153.445 300.375 154.336 302.438V303H147.516ZM136.723 298.043C138.762 298.043 140.695 297.516 142.523 296.461C144.352 295.406 145.676 294.035 146.496 292.348V284.543H141.398C133.43 284.543 129.445 286.875 129.445 291.539C129.445 293.578 130.125 295.172 131.484 296.32C132.844 297.469 134.59 298.043 136.723 298.043ZM169.312 264.961L169.488 269.18C172.277 265.898 176.039 264.258 180.773 264.258C186.094 264.258 189.715 266.297 191.637 270.375C192.902 268.547 194.543 267.07 196.559 265.945C198.598 264.82 201 264.258 203.766 264.258C212.109 264.258 216.352 268.676 216.492 277.512V303H209.988V277.898C209.988 275.18 209.367 273.152 208.125 271.816C206.883 270.457 204.797 269.777 201.867 269.777C199.453 269.777 197.449 270.504 195.855 271.957C194.262 273.387 193.336 275.32 193.078 277.758V303H186.539V278.074C186.539 272.543 183.832 269.777 178.418 269.777C174.152 269.777 171.234 271.594 169.664 275.227V303H163.16V264.961H169.312ZM258.469 284.402C258.469 290.191 257.145 294.855 254.496 298.395C251.848 301.934 248.262 303.703 243.738 303.703C239.121 303.703 235.488 302.238 232.84 299.309V317.625H226.336V264.961H232.277L232.594 269.18C235.242 265.898 238.922 264.258 243.633 264.258C248.203 264.258 251.812 265.98 254.461 269.426C257.133 272.871 258.469 277.664 258.469 283.805V284.402ZM251.965 283.664C251.965 279.375 251.051 275.988 249.223 273.504C247.395 271.02 244.887 269.777 241.699 269.777C237.762 269.777 234.809 271.523 232.84 275.016V293.191C234.785 296.66 237.762 298.395 241.77 298.395C244.887 298.395 247.359 297.164 249.188 294.703C251.039 292.219 251.965 288.539 251.965 283.664ZM273.832 303H267.328V249H273.832V303ZM300.059 303.703C294.902 303.703 290.707 302.016 287.473 298.641C284.238 295.242 282.621 290.707 282.621 285.035V283.84C282.621 280.066 283.336 276.703 284.766 273.75C286.219 270.773 288.234 268.453 290.812 266.789C293.414 265.102 296.227 264.258 299.25 264.258C304.195 264.258 308.039 265.887 310.781 269.145C313.523 272.402 314.895 277.066 314.895 283.137V285.844H289.125C289.219 289.594 290.309 292.629 292.395 294.949C294.504 297.246 297.176 298.395 300.41 298.395C302.707 298.395 304.652 297.926 306.246 296.988C307.84 296.051 309.234 294.809 310.43 293.262L314.402 296.355C311.215 301.254 306.434 303.703 300.059 303.703ZM299.25 269.602C296.625 269.602 294.422 270.562 292.641 272.484C290.859 274.383 289.758 277.055 289.336 280.5H308.391V280.008C308.203 276.703 307.312 274.148 305.719 272.344C304.125 270.516 301.969 269.602 299.25 269.602ZM152.859 341.367H136.406V387H129.691V341.367H113.273V335.812H152.859V341.367ZM171.703 387.703C166.547 387.703 162.352 386.016 159.117 382.641C155.883 379.242 154.266 374.707 154.266 369.035V367.84C154.266 364.066 154.98 360.703 156.41 357.75C157.863 354.773 159.879 352.453 162.457 350.789C165.059 349.102 167.871 348.258 170.895 348.258C175.84 348.258 179.684 349.887 182.426 353.145C185.168 356.402 186.539 361.066 186.539 367.137V369.844H160.77C160.863 373.594 161.953 376.629 164.039 378.949C166.148 381.246 168.82 382.395 172.055 382.395C174.352 382.395 176.297 381.926 177.891 380.988C179.484 380.051 180.879 378.809 182.074 377.262L186.047 380.355C182.859 385.254 178.078 387.703 171.703 387.703ZM170.895 353.602C168.27 353.602 166.066 354.562 164.285 356.484C162.504 358.383 161.402 361.055 160.98 364.5H180.035V364.008C179.848 360.703 178.957 358.148 177.363 356.344C175.77 354.516 173.613 353.602 170.895 353.602ZM206.859 362.848L215.297 348.961H222.891L210.445 367.77L223.277 387H215.754L206.965 372.762L198.176 387H190.617L203.449 367.77L191.004 348.961H198.527L206.859 362.848ZM238.641 339.75V348.961H245.742V353.988H238.641V377.578C238.641 379.102 238.957 380.25 239.59 381.023C240.223 381.773 241.301 382.148 242.824 382.148C243.574 382.148 244.605 382.008 245.918 381.727V387C244.207 387.469 242.543 387.703 240.926 387.703C238.02 387.703 235.828 386.824 234.352 385.066C232.875 383.309 232.137 380.812 232.137 377.578V353.988H225.211V348.961H232.137V339.75H238.641Z" fill="white" /> </svg> </div> <div class="col-2 border"> 3 of 3 </div> <div class="w-100"></div> <div class="col-auto border">text1 text1 text1</div> <div class="col-auto border">text2 text2 text2</div> </div> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
top, bottom, right, left 值不能作为 flex 容器工作设置为 justify-content: center - top, bottom, right, left values not working as flex container is set as justify-content: center
Flexbox-调整内容：居中和对齐项目：居中不起作用？ - Flexbox - justify-content: center and align-items: center not working?
justify-content 和 align-items 在弹性显示上不起作用 - justify-content and align-items not working on flex display
Flex对齐项目：居中； 不允许我使用Justify-content：flex-end; 在同一块 - Flex Align-items: center; Doesnt allow me to use Justify-content: flex-end; in the same block
Flex调整内容：中心覆盖 - Flex justify-content: center overwrite
调整内容以使用Flex Box居中 - justify-content to center using Flex Box
justify-content 的 Safari 问题：flex-end； align-items: flex-end; - Safari issue with justify-content: flex-end; align-items: flex-end;
如何在触发 flex-wrap 时正确对齐，但在其他情况下对齐内容空间？ - How to align right when flex-wrap is triggered but justify-content space-between otherwise?
Flex justify-content、align-items 在 Safari 或移动浏览器上不起作用 - Flex justify-content, align-items not working on Safari or mobile browsers
为什么在我添加对齐项之前 flex-direction 和 justify-content 不起作用？ - Why doesn't flex-direction and justify-content work until I add align-items?
相关标签