Question

我正在尝试建立一个响应迅速的网站。我正在尝试，如果分辨率更改，我的文字将保留在我的照片下。（例如，如果有人调整其Web浏览器的大小。）我的第一个问题，如果格式错误，我深表歉意。感谢您抽出宝贵的时间来阅读和帮助！（请注意，如果需要所有代码，我只会添加针对此问题的HTML和CSS，我可以发布GitHub链接。）

HTML：

<body>
<div class="Mid">
    <div id="TopLeft">
        Daniel Apacik
    </div>
    <div id="Selfie">
        <img src="images/me.jpg" alt="Photo of Daniel Apacik">
    </div>
    <div id="About">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur atque excepturi id vero voluptatibus iste commodi. Necessitatibus atque illo itaque officia exercitationem maiores culpa molestiae ipsa. Voluptates, iste magni.
    </div>
    <div id="TopRight">
        Projects | Contact 
    </div>
</div>
</body>

CSS：

.Mid {
background: url(images/midback2.png) center;
background-size: cover;
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 1000px;
font-size: 16px; 
height: 2em;
padding: 0%;
margin: 0%;
min-height: 100vh; 
min-width: 100vw;
}

.Mid #TopLeft{
position: absolute;
top: 8px;
left: 16px;
font-family: Helvetica;
}
 .Mid #Selfie img{
display: block;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -100px;  
}

.Mid #TopRight {
position: absolute;
top: 3%;
right: 3%;
font-family: Helvetica, Arial,  sans-serif
}
 .Mid #About {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -200px;
   margin-left: -200px;
   text-align: center;
   max-width: 20%;

   }

Answer 1

欢迎使用StackOverflow。

理想情况下，您应该为示例提供公开可用的图像，但是我已经用发现的叶子的随机图像重新创建了示例。

我看到的最大问题是，您的定位错误。如果您对所有内容都使用绝对定位，那么您永远不会对响应式设计走得太远。

相反，您应该首先使用文档的自然流程以及CSS技术来调整位置。在这种情况下，您似乎要尝试在图像后加上一段文字，并且希望将两者居中。在CSS中有几种居中的技术。在这里，我使用了经典的margin: 0 auto属性来创建自动居中的边距。

body {
  background-color: black;
  min-height: 100vh;
  min-width: 100vw;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
}

#topLeft {
  font-family: Helvetica, Arial, sans-serif;
}

#selfie img {
  display: block;
  border-radius: 50%;
  margin: 0 auto;
  height:100px;
  width:auto;
}

#topRight {
  position: absolute;
  top: 3%;
  right: 3%;
  font-family: Helvetica, Arial, sans-serif
}

#about {
  display: block;
  text-align: center;
  padding: 10px;
  padding-left: 3em;
  padding-right: 3em;
  margin: 0 auto;
}

<body>

  <div id="topLeft">
    Daniel Apacik
  </div>
  <div id="selfie">
    <img src="https://www.woodlandtrust.org.uk/media/100758176/whitebeam-leaf-paul-sterry-NPL.jpg" alt="Example photo">
  </div>
  <div id="about">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur atque excepturi id vero voluptatibus iste commodi. Necessitatibus atque illo itaque officia exercitationem maiores culpa molestiae ipsa. Voluptates, iste magni.
  </div>
  <div id="topRight">
    Projects | Contact
  </div 
</body>

我建议您阅读CSS技术。 CSS技巧是一个好的开始。例如，他们对所有centering with CSS都有很好的指导。

但是作为一般规则，始终避免使用任何假定宽度的位置。将相对位置与HTML的顺序一起使用，以及百分比，计算等。当您确实需要将样式限制为特定的屏幕尺寸时，可以使用media queries

当分辨率改变时，需要帮助将文本居中放置在图像下方

1 个答案: