Question

我是新手，所以可能问题可能听起来很愚蠢。对不起。但我整天都在解决这个小问题。

我有一个学生项目：

https://codepen.io/kremlevmax/pen/EomEyb

HTML：

<body>
    <div class="menu-bar">
<button href="#" class="btn menu-button">Test Button</button>
      <button href="#" class="btn menu-button">Test Button</button>
      <button href="#" class="btn menu-button">Test Button</button>
</div>
    <div class="outer">
      <div class="inner">
        <div class="container">
          <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
              </div>
            </div>
</div>
</div>
</div>

CSS：

body {
  background-color: #C0F2FB;
  font-family: "Tahoma";
  margin: 0;
}

.outer {
  background-color: #E8F8FA;
  margin: 0 auto;
}

.inner {
  background-color: #FFFFFF;
  width: 94%;
  padding: 20px 20px;
  margin: 70px auto;
  overflow: hidden;
}


.portfolio-photo {
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.div-photo-text {
  padding: 50%;
  text-align: left;
}
.text {
  font-size: 120%;
}


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

.menu-button {
  float: right;
  background-color: #1A899D;
  border: 2px solid #1A899D;
  color: #C0F2FB;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.menu-button:hover {
  background-color: #C0F2FB;
  color: #000000;
}

实际上有三个问题：

为什么＆＃34;一些测试文本＆＃34;并不是以div为中心垂直居中从图片右边？
为什么在滚动图片和文字时会超出菜单而不是？
如果我删除div-photo-text类中的填充＆＃34;某些测试文本＆＃34;在图像下移动，但为什么？不应该col-lg-3和col-lg-9用div旁边的文本移动div与图像？

感谢您提供任何帮助。

Answer 1

Hi Max对于第一个问题，您需要删除50％填充，因为它在所有方向上都提供填充并添加垂直对齐和水平对齐。

//Vertical
.vertical-align {
    display: flex;
    align-items: center;
}

//Horizantal
.text {
  text-align: center;
}

对于第二个问题，您只需要在菜单中添加z-index:1即可覆盖您的文字。 z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

对于第3个问题，它就像是因为你错过了使用bootstrap行网格时需要的下面的div，你需要将它添加到文本和图像的父div中，以告诉页面它们应该在一行中。

<div class="row">

</div>

检查此处的代码:: https://codepen.io/anon/pen/GymbVJ

Answer 2

试试这个

＆＃13;

body {
  background-color: #C0F2FB;
  font-family: "Tahoma";
  margin: 0;
}

.outer {
  background-color: #E8F8FA;
  margin: 0 auto;
}

.inner {
  background-color: #FFFFFF;
  width: 94%;
  padding: 20px 20px;
  margin: 0 auto;
  overflow: hidden;
}


.portfolio-photo {
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.div-photo-text {
  display: flex;
  align-items: center;
  text-align: left;
}

.text {
  font-size: 120%;
}

.menu-bar {
  z-index: 1
  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);
}

.menu-button {
  float: right;
  background-color: #1A899D;
  border: 2px solid #1A899D;
  color: #C0F2FB;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.menu-button:hover {
  background-color: #C0F2FB;
  color: #000000;
}
.row{
  display: inline-flex;
    align-items: center;
}

＆＃13;

    <div class="menu-bar">
<button href="#" class="btn menu-button">Test Button</button>
      <button href="#" class="btn menu-button">Test Button</button>
      <button href="#" class="btn menu-button">Test Button</button>
</div>
    <div class="outer">
      <div class="inner">
        <div class="container">
          <div class="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
            </div>
            
          </div>
        </div>
        </div>
</div>

＆＃13;

<div>中文本的垂直位置

2 个答案: