为什么没有在图像中间显示文字

我上周开始使用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

为我工作。我在鼠标悬停时看到“John Doe”。这不是你想要做的吗？ –

您正在使用哪种浏览器？浏览器和版本很重要。 – baao

Chrome浏览器是最新版本，如果您全屏显示的页面不在中心，只能在运行代码片段中：/ – user3119614

你可以尝试在图像配

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

或仅在.container写

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

如果孩子元素有显示终端ay：inline-block，你可以在父母上写字text-align：center，这不是完美的，但它是有用的。

如果元素有显示：块那么你就可以边界中心是：汽车

祝你好运:)

来源

2017-02-23 20:28:58 jseezo

为什么没有在图像中间显示文字

回答

相关问题