Question

我正在制作一个网站，我需要将图片居中放在图像中。我在CSS代码中尝试了保证金，但仍然没有工作。我使用图像作为文本的背景，因为它将简化我稍后将添加的动画。如果作为背景的图像不起作用，我总能找到解决方法。我怎样才能做到这一点？我尝试的不是工作。

编辑：抱歉，我忘记了我试图居中的文字是.IOStext（在CSS中）。我试图将其放在Moon。

的中间

我的代码：

＆＃13;

@font-face {
  font-family: UDFont;
  src: url(gomarice_gogono_cocoa_mochi.ttf);
}
body {
  background-image: url(background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #101423;
  min-width: 100%;
  min-height: 100%;
  font-family: 'UDFont', Impact, Helvetica, Arial, Sans-serif;
}
#header {
  width: 50%;
  margin: 100px auto;
}
#headerContent {
  width: 300px;
  margin: auto;
}
#mainTitle {
  width: 100%;
  margin: auto;
  text-align: center;
}
.universeTitle, .devTitle {
  font-size: 3em;
  margin: auto;
  text-align: center;
}
.universeTitle {
  color: #74aeee;
}
.devTitle {
  color: #f1ab3c;
}
.slogan {
  color: #822E81;
  text-align: center;
  margin: 10px auto;
  width: 100%;
}
#content {

}
#selectors {

}
#IOSselector {
  margin: auto;
  width: 300px;
  height: 300px;
  background-image: url(IOSMoon.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.IOStext {
  text-align: center;
  margin: auto;
  margin-top: auto;
  width: 100%;
  height: 50px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome! | Universe Dev</title>
    <link rel="shortcut icon" type="image/png" href="icon.png"/>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div id="header">
      <div id="headerContent">
        <div class="mainTitle">
          <span class="universeTitle">Universe </span><span class="devTitle">Dev</span>
        </div>
          <h3 class="slogan">Universal Development</h3>
      </div>
    </div>
    <div id="content">
      <div id="selectors">
          <div id="IOSselector">
            <h1 class="IOStext">IOS</h1>
          </div>
    <script src="script.js"></script>
  </body>
</html>
<!-- END -->

＆＃13;

Answer 1

你可以在你的＆＃34;月亮＆＃34;然后让你文本内联块：

＆＃13;

#IOSselector {
  margin: auto;
  width: 300px;
  height: 300px;
  background-image: url(http://via.placeholder.com/300x300);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display:flex; 
  justify-content: center;
  align-items: center;
}

.IOStext {
  margin: auto;
  margin-top: auto;
  display:inline-block;
}

＆＃13;

<div id="IOSselector">
  <h1 class="IOStext">IOS</h1>
</div>

＆＃13;

图片顶部的中心文字

1 个答案: