이미지 중간에 텍스트가 표시되지 않는 이유

지난 주에 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>

출처

2017-02-23 user3119614

작품. 내가 mouseover 할 때 나는 "John Doe"를 본다. 네가하려는 일이 아닌가? –

어떤 브라우저를 사용하고 있습니까? 브라우저와 버전이 중요합니다. – baao

Chrome, 가장 최신 버전이며 페이지 전체를 화면 중앙에 있지 않은 경우 실행 코드 스 니펫에서만/ – user3119614

당신은 아이들 요소가 DISPL있다

.container { position: relative; width: 50%; text-align:center; }

경우 이미지입니다

.image { opacity: 1; transition: .5s ease; backface-visibility: hidden; display:block; margin:auto; width:auto; max-width:100%; }

또는 단지 .container에 쓰기를 시도 할 수 있습니다 ay : 인라인 블록, 부모 글 텍스트 정렬 : 가운데에 쓸 수 있지만 완벽하지는 않지만 유용합니다.

요소가 표시가있는 경우 :은 다음 여백과 중앙 수 차단 : 자동

행운을 빕니다 :) 나를 위해

출처

2017-02-23 20:28:58 jseezo

이미지 중간에 텍스트가 표시되지 않는 이유

답변

관련 문제