关于<div>文本垂直定位等三类前端布局问题的技术咨询

Hey Max，我来帮你逐个解决这三个前端小问题，都是新手常踩的坑，别着急～

问题1：图片右侧的文本无法垂直居中 #

你现在给.div-photo-text加的padding: 50%完全不是垂直居中的正确姿势，反而会把容器撑得异常大。另外看你用了Bootstrap的栅格类（col-lg-3、col-lg-9），刚好可以利用Bootstrap的Flex特性来实现垂直对齐：

1. 给包含两个col的父容器套一个.row（这也能顺便解决第三个问题），并给这个row加上align-items: center类，这样里面的列就会自动垂直居中。
2. 删掉.div-photo-text里的padding: 50%，换成合适的左右内边距（比如padding-left: 20px）来让文本和图片保持合理间距。

修改后的相关代码：

HTML部分 #

<div class="container">
  <div class="row align-items-center"> <!-- 新增row和垂直居中类 -->
    <div class="col-lg-3 col-sm-3">
      <img src="https://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300" class="portfolio-photo">
    </div>
    <div class="col-lg-9 col-sm-9 div-photo-text">
      <p class="text"> Some test text </p> <!-- 这里你漏了</p>标签，记得补上！ -->
    </div>
  </div>
</div>

CSS部分 #

.div-photo-text { 
  /* 删掉padding:50% */
  padding-left: 20px; /* 替换成合适的内边距 */
  text-align: left; 
}

问题2：滚动页面时内容覆盖菜单 #

你的菜单用了position: fixed，这个定位会让元素脱离正常文档流，而且默认的堆叠层级（z-index）不高，所以滚动时后面的内容会跑到菜单上方。解决分两步：

1. 给菜单设置一个较高的z-index，确保它在所有内容的最上层：

.menu-bar {
  position: fixed;
  overflow: hidden;
  top: 0;
  width: 100%;
  padding: 10px;
  background-color: #1A899D;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 999; /* 新增这一行，让菜单处于最上层 */
}

2. 因为fixed菜单不占据文档流空间，页面顶部的内容会被菜单挡住，给.inner调整顶部外边距，值等于菜单高度加上你原本的上边距（比如改成margin: 120px auto）：

.inner {
  background-color: #FFFFFF;
  width: 94%;
  padding: 20px 20px;
  margin: 120px auto; /* 修改顶部外边距，避开菜单区域 */
  overflow: hidden;
}

问题3：删除padding后文本跑到图片下方，col未横向排列 #

这是因为你没遵循Bootstrap栅格的核心规则：所有col必须放在.row容器里面。Bootstrap的row会通过Flex布局让内部的col横向排列，你直接把col放在.container里，没有row包裹，col会默认变成块级元素，占满整行，自然就上下堆叠了。

解决方法很简单：给两个col外面套一个.row容器，就像问题1里的修改那样，加上<div class="row align-items-center">包裹两个col，Bootstrap的栅格就会正常生效，col就能横向排列了。

内容的提问来源于stack exchange，提问作者Max Kremlev