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; 
 
}

<!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> 
 
\t <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"> 
 
\t <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> 
 
\t <li><a href="#">Year</a></li> 
 
\t <li><a href="#">Section</a></li> 
 
\t <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; 
}

，你可以看到这是一个初学者，这就是为什么代码很少，而且外观设计还是很平淡。

来源

2017-08-26 Rolenz Pangan

什么形象，你想要那个形象在哪里？ –

请提供工作代码片段和哪个图片不能放置其位置？ –

avatar3.png它应该在它的div的中心，但它不会去中心 –

尝试中心类改成这样：

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

通过使其auto自动居中左，右页边距。

来源

2017-08-26 08:14:57

好吧试试吧 –

CSS - 图像位置问题

回答

相关问题