CSS-图片位置问题

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>

hi beginner here need help in my current project(it is still on-going i started it a minute ago) the image i need to can be placed in the position i needed it to be and when i add new tags it keeps moving away please help and thank you. 您好，初学者，在我当前的项目中需要帮助（它仍在进行中，我在一分钟前就开始了）可以将需要放置的图像放置在所需的位置，当我添加新标签时，它会一直在移动帮助，谢谢你。

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

as you can see it is a beginners that is why the codes are few and the designs is still very plain. 如您所见，这是一个初学者，这就是为什么代码很少且设计仍然非常简单的原因。

Answer 1

Try to change the center class to this: 尝试将中心类更改为此：

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

By setting the left and right margins to auto it centers automatically. 通过将左右边距设置为auto它会auto居中。

CSS-图片位置问题

问题描述

1 个解决方案

解决方案1
0 2017-08-26 08:14:57

CSS-图片位置问题

问题描述

1 个解决方案

解决方案1 0 2017-08-26 08:14:57

解决方案1
0 2017-08-26 08:14:57