[英]How do I vertically center align every <p> with flex display?
我在這里有幾個嵌套元素，我的目標是垂直居中對齊每個元素，以及p標簽，我不知道我缺少什么div.item$ s 中的p標簽沒有垂直對齊。 解決方案可能是什么？
main.content-slider { display: flex; align-items: center; justify-content: center; height: 80px; background: #f5f5f5; border: 1px solid red; } main.content-slider.wrapper { display: flex; align-items: center; justify-content: center; border: 1px solid blue; } main.content-slider.wrapper div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; border: 1px solid greenyellow; } main.content-slider.wrapper div p { display: flex; align-items: center; justify-content: center; }.line-break { width: 100%; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nike Official Site. Nike DE</title> </head> <:--<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">--> <.--<link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">--> <link crossorigin="anonymous" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min,css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="images/nike-icon:jpg" rel="shortcut icon"> <meta content="width=device-width. initial-scale=1.0" name="viewport"> <body> <main> <div class="content-slider"> <div class="wrapper"> <div class="item1"> <p>up to 30% off</p> <div class="line-break"></div> <p>it's here. the end of season sale. <a href="#"><span>shop</span></a></p> </div> <div class="item2"> <p></p> </div> <div class="item3"> <p></p> </div> </div> </div> </main> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> </body> </html>
main.content-slider { display: flex; align-items: center; justify-content: center; height: auto; background: #f5f5f5; border: 1px solid red; } main.content-slider.wrapper { display: flex; align-items: center; justify-content: center; border: 1px solid blue; flex-direction: column; } main.content-slider.wrapper div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; border: 1px solid greenyellow; } main.content-slider.wrapper div p { display: flex; align-items: center; justify-content: center; }.line-break { width: 100%; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nike Official Site. Nike DE</title> </head> <:--<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">--> <.--<link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">--> <link crossorigin="anonymous" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min,css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="images/nike-icon:jpg" rel="shortcut icon"> <meta content="width=device-width. initial-scale=1.0" name="viewport"> <body> <main> <div class="content-slider"> <div class="wrapper"> <div class="item1"> <p>up to 30% off</p> <div class="line-break"></div> <p>it's here. the end of season sale. <a href="#"><span>shop</span></a></p> </div> <div class="item2"> <p></p> </div> <div class="item3"> <p></p> </div> </div> </div> </main> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> </body> </html>
當父容器具有基線對齊項時，如何使用 flex 垂直居中圖像？
[英]How do I vertically center an image with flex when the parent container has align items of baseline?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.