当前位置： 文江博客 话题详情

如何将侧栏文本和图标集中在HTML/CSS中？

发布于 2025-02-07 00:48:44 字数 4062 浏览 3 评论 0 原文

我正在尝试将文本和图标集中在我网站的侧边栏中，但是我现有的CSS text-Align：中心; 不起作用。这是相关的代码和屏幕截图：

”在此处输入图像说明“

如何将其转换为以下一个示例：

“在此处输入映像”

特定问题：

  • 您可以确定为什么 text-align：中心; 在这种情况下不起作用吗？
  • 实现侧边栏内文本和图标的中心的最佳CSS方法是什么？

代码：

CSS 

/* sidebar starts here*/
.sidebar {
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #df7f27;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}
.sidebar ul li {
    width: 100%;
    list-style: none;
}
.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    align-items: center;
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
}

html 

<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.jpg" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main"></div>
    </div>
</body>

谢谢您，感谢您的帮助

原文

I'm trying to center both the text and icons within my website's sidebar, but my existing CSS text-align: center; isn't working. Here's the relevant code and screenshots:

enter image description here

How to convert it to like this one example below:

enter image description here

Specific Questions:

  • Can you identify why text-align: center; isn't working in this context?
  • What's the best CSS approach to achieve the centering of both text and icons within the sidebar?

Code:

CSS

/* sidebar starts here*/
.sidebar {
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #df7f27;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}
.sidebar ul li {
    width: 100%;
    list-style: none;
}
.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    align-items: center;
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
}

HTML

<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.jpg" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main"></div>
    </div>
</body>

Thank you in advance, I appreciate your help

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

权谋诡计 2025-02-14 00:48:45

尝试添加浮点并在图标中添加边距

。
浮子：左；
保证金：0 5px
}

try to add float and margin to the icons

.sidebar ul li a i {
float:left;
margin:0 5px
}

回复 原文
花期渐远 2025-02-14 00:48:45 
.menuitem {
  display: flex;
  align-items: center;
  justify-content: center;  
}

将DIV显示器更改为FLEX并尝试。
请告知我将 menuitem 放在所有DIV类名称上。

.menuitem {
  display: flex;
  align-items: center;
  justify-content: center;  
}

change the div display to flex and try this.
please inform that I put menuitem to all the div class names.

回复 原文
长亭外，古道边 2025-02-14 00:48:44

在任何内容首先了解图标 www.fontawesome.com 工作之前。

只有一件简单的事情要理解：

＆lt; i＆gt;您在此处使用的标签正在发表评论，并且将SVG加载到标签上方的代码
<i class="sidebar-icon fas fa-user-graduate"></i>

解决方案

只需将这些属性添加到您的html

  • padding-left：30px或根据您的要求;
  • Jusify-content：Flex-Start; 
.sidebar ul li a {
  width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
  align-items: center
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
}

要添加新类

  • svg
  • 边缘右翼对齐同一行中的测试
.sidebar ul li a svg{
  margin-right: 15px;
  width: 25px !important;
}

运行此代码

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}

.logo h2{
    color: #df7f27;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
    
}
.search label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.search i {
    position: absolute;
    right: 15px;
    top: 15px; 
    cursor: pointer;
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}

.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

/* sidebar starts here*/
.sidebar {
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #df7f27;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}
.sidebar ul li {
    width: 100%;
    list-style: none;
    display:  flex;
  justify-content: center;
}
.sidebar ul li a {
  width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
  align-items: center
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
  margin-right: 15px;
  width: 25px !important;
}
    <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="styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.jpg" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main"></div>
    </div>
</body>
</html>

Before anything first understand how the icons www.fontawesome.com works.

There's only one simple thing to understand that is:

That the < i > tag you used here is getting commented out and a svg is been loaded to your code above the tag
<i class="sidebar-icon fas fa-user-graduate"></i>

Solution

Just add these Properties to your html

  • Padding-left: 30px or as per your requirement;
  • Justify-content: flex-start;
.sidebar ul li a {
  width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
  align-items: center
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
}

New Class to be Added for svg

  • Added a fixed width for svg.
  • Margin-right to align the test in the same line
.sidebar ul li a svg{
  margin-right: 15px;
  width: 25px !important;
}

Run this Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}

.logo h2{
    color: #df7f27;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
    
}
.search label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.search i {
    position: absolute;
    right: 15px;
    top: 15px; 
    cursor: pointer;
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}

.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

/* sidebar starts here*/
.sidebar {
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #df7f27;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}
.sidebar ul li {
    width: 100%;
    list-style: none;
    display:  flex;
  justify-content: center;
}
.sidebar ul li a {
  width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
  align-items: center
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
  margin-right: 15px;
  width: 25px !important;
}
    <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="styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.jpg" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main"></div>
    </div>
</body>
</html>

回复 原文
み青杉依旧 2025-02-14 00:48:44

您可以尝试使用flex框，然后做合理的内容，以使其之间或空间之间存在空间

You can try using flex box and then doing justify-content to be space-between or space-evenly

回复 原文
小女人ら 2025-02-14 00:48:44

您应该做两件事：例如，

  1. 在侧边栏中的每个图标中添加一个新类，例如：
<i class="sidebar-icon fas fa-user-graduate"></i>
  1. 通过添加水平边距来样式。在您看到的情况下调整像素。
.sidebar-icon {
  width: 1.5em !important; /* Prevent uneven width of icons */
  margin-left: 16px;
  margin-right: 16px;
}

这是结果

You should do two things:

  1. Add a new class to every icon in your sidebar, for instance:
<i class="sidebar-icon fas fa-user-graduate"></i>
  1. Style that class by adding horizontal margin. Adjust the pixels as you see fit.
.sidebar-icon {
  width: 1.5em !important; /* Prevent uneven width of icons */
  margin-left: 16px;
  margin-right: 16px;
}

This is the result

Example result

回复 原文
巾帼英雄 2025-02-14 00:48:44

我看到您的问题您只需要添加一些CSS Justify-content：Center; ，您使用显示flex; s为什么文本align不起作用，

<!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="styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
    <title>pomodone.app</title>
</head>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.jpg" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main"></div>
    </div>
</body>
</html>


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}

.logo h2{
    color: #df7f27;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
    
}
.search label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.search i {
    position: absolute;
    right: 15px;
    top: 15px; 
    cursor: pointer;
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}

.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

/* sidebar starts here*/
.sidebar {
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #df7f27;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}
.sidebar ul li {
    width: 100%;
    list-style: none;
   text-align: center;
}
.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    align-items: center;
    /* my chnages here */
   justify-content:center;
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    margin-right: 5px;
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    display: inline-block;
    margin-right: 5px;
}

结帐我的代码，希望它能帮助您。 :)

i see your problem you just simply need to add some css justify-content:center; , you use display flex that;s why text-align is not working,

<!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="styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
    <title>pomodone.app</title>
</head>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.jpg" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main"></div>
    </div>
</body>
</html>


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}

.logo h2{
    color: #df7f27;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
    
}
.search label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.search i {
    position: absolute;
    right: 15px;
    top: 15px; 
    cursor: pointer;
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}

.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

/* sidebar starts here*/
.sidebar {
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #df7f27;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}
.sidebar ul li {
    width: 100%;
    list-style: none;
   text-align: center;
}
.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    align-items: center;
    /* my chnages here */
   justify-content:center;
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    margin-right: 5px;
}

.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    display: inline-block;
    margin-right: 5px;
}

Checkout my code, Hope it will help you. :)

回复 原文
~没有更多了~

关于作者

冰之心

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文