[英]Problems with HTML and CSS text-align is in center
This is my website:这是我的网站:
How to convert it to like this one example below:如何将其转换为如下示例:
I have tried:我努力了:
text-align: start;
but that doesn't seem to work,但这似乎不起作用,
Is this an HTML or CSS issue?这是 HTML 还是 CSS 问题? I already have text-alight: center in my code, but for some reason, it doesn't works, how to solve this issue?
我的代码中已经有 text-alight: center ,但由于某种原因,它不起作用,如何解决这个问题?
This is my code:这是我的代码:
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 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 really appreciate your help预先感谢您,非常感谢您的帮助
www.fontawesome.com
works.www.fontawesome.com
的工作原理。 There's only one simple thing to understand that is:只有一件简单的事情可以理解:
<i class="sidebar-icon fas fa-user-graduate"></i>
Solution
解决方案
Just add these Properties to your html只需将这些属性添加到您的 html
.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为 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 ai { 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>
您可以尝试使用弹性框,然后将 justify-content 设置为 space-between 或 space-evenly
You should do two things:你应该做两件事:
<i class="sidebar-icon fas fa-user-graduate"></i>
.sidebar-icon {
width: 1.5em !important; /* Prevent uneven width of icons */
margin-left: 16px;
margin-right: 16px;
}
This is the result这是结果
i see your problem you just simply need to add some css justify-content:center;我看到你的问题你只需要添加一些 css justify-content:center; , you use display flex that;s why text-align is not working,
,您使用 display flex 这就是为什么 text-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;
}
Checkout my code, Hope it will help you.查看我的代码,希望对您有所帮助。 :)
:)
.menuitem {
display: flex;
align-items: center;
justify-content: center;
}
change the div display to flex and try this.将 div 显示更改为 flex 并尝试此操作。 please inform that I put
menuitem
to all the div class names.请告知我将
menuitem
放在所有 div 类名称中。
try to add float and margin to the icons尝试为图标添加浮动和边距
.sidebar ul li ai { float:left; .sidebar ul li ai { float:left; margin:0 5px }
边距:0 5px }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.