Question

尝试垂直对齐文章内容，但无法弄清楚。我尝试过使用table和vertical align，但似乎无法让它工作。我对任何事情持开放态度。我只是希望它能够在右手边做出响应并完全集中。

左侧部分显然有一个图像。我不知道如何插入它。它非常适合在一行中，但不理解如何垂直对齐文章中的内容。

如果有人可以提供帮助，那就太棒了！谢谢:)）

#employee-profile {
  position: relative;
}

img {
  display: inline-block;
  width: 40%;
}

#employee-profile-info {
  display: inline-block;
  position: absolute;
  width: 60%;
  height: calc(100% - 4px);
  box-sizing: border-box;
  padding: 40px;
  border: 3px solid black;
  margin: auto;
  vertical-align: middle;
}

a {
  display: inline-block;
  text-decoration: none;
  color: black;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid black;
  transition: .5s;
}

a:hover {
  color: grey;
}

:nth-child(5) {
  background: red;
  width: 10%;
}

:nth-child(6) {
  background: yellow;
  width: calc(90% - 5px);
}

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="main.css">
  
</head>
<body>
  
  <div id="employee-profile">
    <img src="img/pic1.jpeg" alt="pic1">
    
    <div id="employee-profile-info">
      <article class="info">
          <h3>Cameron Walker </h3>

          <h4>Associate Consultant</h4>

          <a href="/consultants/cameron-walker"><i class="fa fa-list-ul" aria-hidden="true"></i> View consultant jobs</a>

          <a href="mailto:cameron.walker@twentyrecruitment.com"><i class="fa fa-envelope-o" aria-hidden="true"></i>cameron.walker@twentyrecruitment.com</a>

          <a target="_blank" href="https://www.linkedin.com/in/cameron-walker-63a73793/"><i class="fa fa-linkedin" aria-hidden="true">In</i></a>

          <a href="tel:+44 203 189 4317"><i class="fa fa-phone" aria-hidden="true"></i>+44 203 189 4317</a>

          <p class="custom-scroll mCustomScrollbar _mCS_1"> Cameron started at Twenty in August 2017 following the completion of his degree in English from the University of Nottingham.&nbsp;</p>
      </article>
    </div>
  </div>
  
  
</body>
</html>

Answer 1

这是你想要的？从#employee-profile-info

移除高度

＆＃13;

#employee-profile {
  position: relative;
}

img {
  display: inline-block;
  width: 40%;
}

#employee-profile-info {
  display: inline-block;
  position: absolute;
  width: 60%;
  box-sizing: border-box;
  padding: 40px;
  border: 3px solid black;
  margin: auto;
  vertical-align: middle;
}

a {
  display: inline-block;
  text-decoration: none;
  color: black;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid black;
  transition: .5s;
}

a:hover {
  color: grey;
}

:nth-child(5) {
  background: red;
  width: 10%;
}

:nth-child(6) {
  background: yellow;
  width: calc(90% - 5px);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="main.css">
  
</head>
<body>
  
  <div id="employee-profile">
    <img src="img/pic1.jpeg" alt="pic1">
    
    <div id="employee-profile-info">
      <article class="info">
          <h3>Cameron Walker </h3>

          <h4>Associate Consultant</h4>

          <a href="/consultants/cameron-walker"><i class="fa fa-list-ul" aria-hidden="true"></i> View consultant jobs</a>

          <a href="mailto:cameron.walker@twentyrecruitment.com"><i class="fa fa-envelope-o" aria-hidden="true"></i>cameron.walker@twentyrecruitment.com</a>

          <a target="_blank" href="https://www.linkedin.com/in/cameron-walker-63a73793/"><i class="fa fa-linkedin" aria-hidden="true">In</i></a>

          <a href="tel:+44 203 189 4317"><i class="fa fa-phone" aria-hidden="true"></i>+44 203 189 4317</a>

          <p class="custom-scroll mCustomScrollbar _mCS_1"> Cameron started at Twenty in August 2017 following the completion of his degree in English from the University of Nottingham.&nbsp;</p>
      </article>
    </div>
  </div>
  
  
</body>
</html>

＆＃13;

尝试垂直对齐文章内容，但无法弄清楚

1 个答案: