html - 试图垂直对齐文章内的内容但无法弄清楚-6ren

html - 试图垂直对齐文章内的内容但无法弄清楚

转载作者：行者123 更新时间：2023-11-28 15:08:29

26

4

试图垂直对齐文章中的内容，但无法弄清楚。我试过使用表格和垂直对齐，但似乎无法正常工作。不过我对任何事情都持开放态度。我只希望它能够响应并在右侧完美居中。

左边明显有图片进去，不知道怎么插入。它很适合排成一行，但不明白如何垂直对齐文章中的内容。

如果有人能帮助我，那就太棒了!谢谢:)

#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>

最佳答案

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

中移除高度

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

<!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>

关于html - 试图垂直对齐文章内的内容但无法弄清楚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48927249/

26

4

0

文章推荐： html - 除非存在其他样式，否则最小高度样式不适用于按钮

文章推荐： html - 如何将导航链接放置在右侧并对其应用 scrollspy？

文章推荐：按钮中的 HTML 文本不起作用/重叠

文章推荐： css - HTML 表格列留有空白

c++ - 试图 Cout 函数的返回
我是 C++ 的新手，我在使用这段代码时遇到了问题: string output_date(int day, int month, int year){ string date; if
linux - 试图 tar 一个目录而不是列出目录
所以我这样做了 tar cvzf test.zip FP 为了创建目录 FP 的 zip 但是，它会列出 zip 中的目录 FP/ FP/php/ FP/php/pdf/ FP/php/docs/ F
swift - 试图 swift 概括
我正在尝试在 Swift、Xcode 7.3(所以是 Swift 2.2)中创建一个通用类，但我似乎无法让它通过编译器: protocol Struct1Protocol { } struct Str
PHPUnit - 试图@cover 不存在的方法
我的测试用例是这样的: class FooTest extends PHPUnit_Framework_TestCase { /** @covers MyClass::bar */ f
homebrew - SHA256不匹配，试图 brew Wine
我正在尝试将brew install wine作为使electron-builder工作的一步。但是我所能得到的只是以下响应: ==> Installing dependencies for wine
c# - 试图 int.parse 多数组字符串
我这样做: string[,] string1 = {{"one", "0"},{"Two", "5"},{"Three","1"}}; int b = 0; for(int i = 0; i <=
c++ - 试图 Hook Notepad.exe
我正在尝试使用 SetWindowsHookEx 键盘 Hook Notepad.exe。如您所见，工作线程正在将其 ASCII 代码(即 wParam)发送到指定的服务器。 UINT WINAPI
java - android listview null 试图 setAdapter()
我正在尝试将 ListView 实现到我的 Fragment 中，但无论我尝试什么，我都会得到一个 NullPointerException。我检查对象是否为 null 并记录是否为 null，看起来
html - 试图 float 两个 div 但有问题
我尝试在一行中对齐两个 div。使用 float left 属性，一切顺利。但是当我在 div 中使用图像时，它开始产生问题。所以这是我的示例代码:- Some headi
python-3.x - 试图 reshape 我的 numpy 数组以获得额外的维度
我目前正在使用此代码来获取图像的灰度图像表示并以 (512, 370, 1) 的格式表示它大批。 img_instance = cv2.imread(df.iloc[i][x_col]) / 255.
c++ - 试图 Hook 一个窗口的窗口过程。 SetWindowsHookEx 失败返回 NULL HHOOK 并且 GetLastError 返回错误代码 126
总结我正在创建一个简单的应用程序，它允许用户选择一个包含顶级窗口的进程。用户首先键入 native DLL(而非托管 DLL)的路径。然后用户键入将在 Hook 过程中调用的方法的名称。该方法不得返

首页

博学

6Ren·AI

商城

html - 试图垂直对齐文章内的内容但无法弄清楚