Question

我上周开始使用HTML和CSS3并且正在制作我的第一个网站，我不知道文本在图像中间显示的方式或原因，这里是代码，抱歉布局不好我刚开始一周前！

＆＃13;

<!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>

＆＃13;

Answer 1

你可以尝试写.image

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

如果children元素具有 display：inline-block ，则可以写入父 text-align：center ，它并不完美，但它很有用。

如果元素有显示：阻止，那么你可以用 margin：auto
来居中

祝你好运：）

为什么文本不在图像中间显示

1 个答案: