Question

html body{
    margin: 0;
    padding: 0;
    background-color: #e5e5e5;
}
hr{
    border: 0;
    border-top: 1px solid #eee;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000066;
}
.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover:not(.active) {
    background-color: #848dff;
}

.active {
    background-color: #0000ff;
}
.navbar{
    margin: auto;
    padding: auto;
    position: center;
    height: 51px;
}

.prof{
    margin: 5px;
    padding: 0;
    height: 400px;
    width: 300px;
    background-color: #ffffff;
}
.prof h1{
    font-family: "Open Sans", Sans-serif;
    font-size:24px;
    text-align:center!important;
    font-style: none;
}
.prof p{
    font-family: "Open Sans", Sans-serif;
    text-align:center!important;
    font-style: none;
}
.center{
    width: 106px;
    height: 106px;
    border-radius: 50%;
    border-style: none;
   position: middle;
    margin-top: 5px;
    margin-bottom: 10px;
}
.sort{
    margin: 5px;
    padding: 0;
    height: 115px;
    width: 300px;
    background-color: #4c4cff;
}
.sort ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", Sans-serif;
    text-align: center;
}

.sort li a {
    display: block;
    color: #ffffff;
    padding: 8px 8px;
    text-decoration: none;
}
.sort li a:hover {
    background-color: #0000ff;
    color: #ffffff;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
	<title>AUXILIUM</title>
</head>
<body>
<header>
<div class="navbar">
<ul>
  <li><a class="active" href="index.php" alt="Home"><i class="fa fa-home"></i>Home</a></li>
  <li><a href="#" alt="Profile"><i class="fa fa-user"></i></a></li>
  <li><a href="#" alt="Students"><i class="fa fa-users"></i></a></li>
  <li><a href="#" alt="Schedules"><i class="fa fa-clock-o"></i></a></li>
</ul>
</div>
</header>
<div class="prof">
<h1>My Profile</h1>
<p class="center">
	<img src="avatar3.png" class="center">
</p>
<hr>
<p><a href="#"><i class="fa fa-address-book-o">Professor Name</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Professor ID</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Department</i></p>
</div>
<div class="sort">
<ul>
	<li><a href="#">Year</a></li>
	<li><a href="#">Section</a></li>
	<li><a href="#">Course</a></li>
</ul>
</div>
</body>
</html>

嗨初学者在这里需要帮助我当前的项目（它仍在进行我一分钟前开始）我需要的图像可以放在我需要它的位置，当我添加新的标签，它保持走开，请帮忙，谢谢你。

HTML

    <!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
    <title>AUXILIUM</title>
</head>
<body>
<header>
<div class="navbar">
<ul>
  <li><a class="active" href="index.php" alt="Home"><i class="fa fa-home"></i>Home</a></li>
  <li><a href="#" alt="Profile"><i class="fa fa-user"></i></a></li>
  <li><a href="#" alt="Students"><i class="fa fa-users"></i></a></li>
  <li><a href="#" alt="Schedules"><i class="fa fa-clock-o"></i></a></li>
</ul>
</div>
</header>
<div class="prof">
<h1>My Profile</h1>
<p class="center">
    <img src="avatar3.png" class="center">
</p>
<hr>
<p><a href="#"><i class="fa fa-address-book-o">Professor Name</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Professor ID</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Department</i></p>
</div>
<div class="sort">
<ul>
    <li><a href="#">Year</a></li>
    <li><a href="#">Section</a></li>
    <li><a href="#">Course</a></li>
</ul>
</div>
</body>
</html>

CSS

 html body{
    margin: 0;
    padding: 0;
    background-color: #e5e5e5;
}
hr{
    border: 0;
    border-top: 1px solid #eee;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000066;
}
.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover:not(.active) {
    background-color: #848dff;
}

.active {
    background-color: #0000ff;
}
.navbar{
    margin: auto;
    padding: auto;
    position: center;
    height: 51px;
}

.prof{
    margin: 5px;
    padding: 0;
    height: 400px;
    width: 300px;
    background-color: #ffffff;
}
.prof h1{
    font-family: "Open Sans", Sans-serif;
    font-size:24px;
    text-align:center!important;
    font-style: none;
}
.prof p{
    font-family: "Open Sans", Sans-serif;
    text-align:center!important;
    font-style: none;
}
.center{
    width: 106px;
    height: 106px;
    border-radius: 50%;
    border-style: none;
   position: middle;
    margin-top: 5px;
    margin-bottom: 10px;
}
.sort{
    margin: 5px;
    padding: 0;
    height: 115px;
    width: 300px;
    background-color: #4c4cff;
}
.sort ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", Sans-serif;
    text-align: center;
}

.sort li a {
    display: block;
    color: #ffffff;
    padding: 8px 8px;
    text-decoration: none;
}
.sort li a:hover {
    background-color: #0000ff;
    color: #ffffff;
}

你可以看到它是一个初学者，这就是为什么代码很少而设计仍然很简单。

Answer 1

尝试将中心类更改为：

.center{
    width: 106px;
    height: 106px;
    border-radius: 50%;
    border-style: none;
    margin: 5px auto 10px auto;
}

通过将左右边距设置为auto，它会自动居中。

CSS - 图像位置问题

1 个答案: