0
先週HTMLとCSS3を使い始めて、最初のウェブサイトを作っていますが、画像の途中にテキストが表示されない、ここでコードは、私はちょうど1週間前に始めたように悪いレイアウトのために申し訳ありません！画像の中央にテキストが表示されないのはなぜですか？
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome to my website!</title>
<link rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-attachment: fixed;
margin:0px;
}
* {
font-family:ProximaNovaRegular, sans-serif;
}
ul{
list-style-type:none;
background-color:#333333;
line-height: 1.8;
-webkit-padding-start: 0px;
margin: 0px;
height:100%;
width: 100%;
padding:0px;
overflow: hidden;
}
li{
color:white;
float:top;
display:inline-block;
width:100px;
height:100%;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
padding:0px;
white-space: nowrap;
}
.sel{
font-size:48px;
text-align:center;
}
.sel:hover{
background-color:white;
color:black;
cursor:pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
header{
background-color:white;
border-bottom:1px solid black;
}
nav{
margin-top: 0px;
}
h1{
padding-top:0px;
margin:0px;
font-weight:normal;
}
#logo{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
float:left;
font-size: 40px;
font-weight:100;
}
#free{
border: 1px #3da2f5;
border-radius: 10px;
background-color:#35c903;
font-weight: 500;
}
img{
height:300;
width:300;
}
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<!--Logo-->
<nav>
<ul>
<h1>
<li id="logo">QuickAnd<span id="free">Free</span>.com</li>
</h1>
</ul>
</nav>
<div class="container">
<img src="https://lh6.ggpht.com/1eVPA6Iukw-F4i5xq1ZWicaKBzmprLGw98YhdG20E-wlsHHg3PcKJqbY_fWLdJeGRw=w300" alt="Avatar" class="image">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</body>
</html>
私の作品：ブロックを、あなたは余裕を持って、それを中央にすることができます。私はマウスオーバー時に "John Doe"を見る。それはあなたがやろうとしていることではありませんか？ –
どのブラウザを使用していますか？ブラウザとバージョンが重要です。 – baao
最新のChrome、また、全画面表示の場合は、中央では実行コードスニペットでしかありません。/ – user3119614