Struggling to align content vertically within an article and in need of some guidance

Still struggling with vertical alignment of content within an article. I've tried using tables and the vertical-align property but can't seem to make it work. Any suggestions for centering the content responsively on the right-hand side?

The left side contains an image, which is easy to insert in a line. However, I'm unsure how to vertically align the other contents within the article.

If anybody could assist me with this, it would be greatly appreciated! Thank you :)

#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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0261636f67706d6c2c75636e696770427675676c767b70676170776b766f676c762c616d6f">[email protected]</a>"><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aba9a5adbaa7a6e6bfa9a4a3adba88bcbfada6bcb1baadabbabda1bca5ada6bce6aba7a5">[email protected]</a></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>
htmlcss

Answer №1

Is this the desired outcome? Please eliminate the height property from #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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b3b1bdb5a2bfbefea7b1bcbbb5a290a4a7b5bea4a9a2b5b3a2a5b9a4bdb5bea4feb3bfbd">[email protected]</a>"><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accfcdc1c9dec3c282dbcdc0c7c9deecd8dbc9c2d8d5dec9cfded9c5d8c1c9c2d882cfc3c1">[email protected]</a></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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set the minimum height of a section in jQuery to be equal to the height of

My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...

javascriptjqueryhtmlcss

Tips for making jQuery maphilight function properly?

Can someone assist me with Mapilight? I have been trying to get it to work but no success so far. Here are the script links in the head section of my HTML. <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/ja ...

javascriptjqueryhtmlmaphilight

perform an action in PHP when a button is clicked

I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...

javascriptphphtmlajax

Tips for designing a form action

I am a beginner and struggling with understanding the CSS for the code below. Can someone help me out? <div id="page-container"> <?php include_once("home_start.php"); ?> <h1>Login</h1> <for ...

css

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

I created a rounded hexagon with stroke width, but the top and bottom curves appear darker. Does anyone know how to evenly distribute the stroke width along the border? Here is my SVG code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox ...

htmlcsssvg

Transforming table headers in Rmarkdown ioslides

I am experimenting with creating a custom table format for tables generated using the ioslides_presentation output type in Rmarkdown with Rstudio Version 0.98.1028. However, I'm facing difficulty in modifying the styling of the table headers. Below i ...

cssformattingmarkdownrstudio

Can anyone suggest methods for displaying query data from a JSON file using HTML?

After countless hours of searching through various forums, I have attempted numerous methods to display query data from a JSON file onto an HTML page. My initial attempt was using XmlHttpRequest, which yielded no results. I then tried utilizing jQuery, sp ...

javascripthtmljqueryjsonajax

What is the impact of a floated element on vertical spacing?

I have come across an article discussing the usage of CSS, but I am puzzled as to why image number four is not positioned below image number one. Instead, it appears below image number three. Can someone please explain this to me? Here is the HTML code sni ...

javascriptjqueryhtmlcss

What is the best way to replicate a div's background color using an image within the body element?

I am looking to achieve a layout similar to the one below: The dark grey color represents the sidebar, but I want to use this color as a repeating vertical image in the body element without covering the footer (light gray). (this is the most straightforw ...

htmlcssimagebackground

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets. Since the n ...

cssvue.jstwitter-bootstrap-3vuetify.js

MTG Life counter. Display fluctuations in count

I am currently working on a fun project creating an MTG (Magic The Gathering) life tracker, even though the code is quite messy. Despite its flaws, it still gets the job done. Click here to view the MTG life tracker https://i.stack.imgur.com/Su17J.png ...

javascripthtmljquerycssecmascript-6

Issues with Angular ngroute: controllers are not functioning properly

In order to route my application with different themes on the same page, I plan to utilize the ngroute module. Here's an example of how I intend to achieve this: <html> <head> <title>Angular JS Views</title> ...

javascripthtmlangularjsngrouteroute-provider

Exploring the possibilities: Utilizing HTML5, File API, and jQuery to

I have a form displayed in a dialog and it includes a "submit" button which, when clicked, utilizes jQuery to send the form data to the server via AJAX. However, I encountered an issue where the uploaded file was always null. After researching on Google, I ...

javascriptjqueryajaxhtml

Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

Struggling to align the drawableLeft horizontally with the hint and bring them closer to the bottom of the TextInputEditText. I have experimented with various attributes but haven't been successful so far. Wondering if I might be overlooking something ...

androidcssxmlandroid-layoutmaterial-ui

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...

javascriptpythonhtmlflask

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with the :after property to see if it c ...

htmlcss

Fluctuating problem arises when placing one div over another div while hovering

Sorry if the title isn't clear. Basically, I have a div that when hovered over, triggers another div to appear with display:block, showing it above the original div. It works well but there is some flickering when moving the cursor over the second div ...

htmlcss

Display or conceal the location where the click event occurs within a single div

progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...

javascriptjqueryhtmlcss

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Is there a way to customize the color of the blue buttons, text, and date indicator in the native datetime picker for Chrome using CSS? https://i.stack.imgur.com/eZSaE.png ...

htmlcssgoogle-chromedatetimepicker