如何垂直对齐元素<li></li>
[英]How to vertically align elements in <li>
问题描述
I want to vertically middle the elements in the "li" but vertical-align: middle;
我想将“li”中的元素垂直居中，但垂直对齐：middle; command does not work.命令不起作用。 Display:table;显示：表格； and Display: table-cell;和显示：表格单元格； I tried commands like.我尝试了类似的命令。 I thought about importing the contents as a block but still didn't work.我想过将内容作为一个块导入，但仍然没有用。 I centered it horizontally but not vertically.我水平居中但不是垂直居中。 I would be glad if you help me.如果你能帮助我，我会很高兴。
.navigation { display: flex; position: relative; margin: 0; padding: 0; height: 75px; background: #222327; align-items: center; justify-content: center; }.navigation ul { margin: 0; padding: 0; display: flex; width: 750px; }.navigation ul li { position: relative; list-style: none; text-align: center; vertical-align: middle; width: 150px; height: 75px; z-index: 1; }
<,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"> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <title>Astronomical Observers</title> <link rel="shortcut icon" href="title_logo_transparent.png"> </head> <body> <div class="navigation"> <ul> <li class="nav_list"> <a class="nav_icon" href="#"> <span> <ion-icon name="home-outline"></ion-icon> </span> </a> <a class="nav_text" href="#">Home Page</a> </li> <li class="nav_list"> <a href="#"> <span> <ion-icon name="newspaper"></ion-icon> </span> <span class="text">News</span> </a> </li> </ul> </body> </html>
1 个解决方案
解决方案1
0 2021-12-16 17:24:18
Define the parent with display: table用display: table定义父级
and the element itself with vertical-align: middle and display: table-cell .以及带有vertical-align: middle和display: table-cell的元素本身。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.