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

ok try it it –

CSS - ここでは画像の位置の問題

答えて

関連する問題