Middle align an absolutely positioned block within a table cell vertically

Here is the code I am working with:

td {
  border: 1px solid #cecece;
  position: relative;
  padding: 80px 20px;
}
.hint {
  background: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
}
<table style="width:800px">
  <tr>
    <td width="50%">
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recommendation</span>
      </div>
    </td>
    <td>
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recommendationSome text with recommendationSome text with recommendation</span>
      </div>
    </td>
  </tr>
</table>

https://plnkr.co/edit/JVkXP3vNtIj4gzwwjm4B?p=preview

I am facing a challenge that I can't seem to resolve:

Is it possible to vertically center the yellow block? It is currently positioned at the top, but I want it to be centered without using line-height since its height is dynamic. Is there a way to achieve this alignment without JavaScript?

htmlcss

Answer №1

This solution is designed to adjust seamlessly regardless of the height of the content!

.hint {
  background: yellow;
  position: absolute;
  top: 0;
  height: 100%;
  left: 100px;
}
.recomendation{
  position:relative;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  display: block;
}

https://plnkr.co/edit/URIFrwBxvX3V7hvRT5km?p=preview

Answer №2

Check out this cool little hack:

.trick {
    background: pink;
    position: relative;
    top: 30%;
    left: 50px;
    transform: translate(50%, -30%);
}

The secret sauce is the transform property.

You can also apply it to center elements horizontally as well.

Here's a great illustration.

Answer №3

Consider utilizing flexbox. It is supported by all modern browsers and can also work in IE10 with the use of prefixes.

.hint {
  ...
  display: flex;
  align-items: center;
}


td {
  border: 1px solid #cecece;
  position: relative;
  padding: 80px 20px;
}
.hint {
  background: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
  display: flex;
  align-items: center;
}
<table style="width:800px">
  <tr>
    <td width="50%">
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recomendation</span>
      </div>
    </td>
    <td>
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recomendationSome text with recomendationSome text with recomendation</span>
      </div>
    </td>
  </tr>
</table>

Answer №4

Here is a revised version based on your specifications:

.suggestion {
    background-color: #ffff00;
    position: fixed;
    top: 50%;
    left: 150px;
}

I adjusted the top position and removed the bottom property as requested.

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

Combining Bootstrap Vue: utilizing class names alongside HTML tags

(Bootstrap-Vue 2.0, Vue.js 2.5) Is it possible to combine traditional CSS Bootstrap 4 classes with Bootstrap-Vue? For example, can I use the following code snippet: <section id="introduction"> <b-container class="h-100"> & ...

cssvue.jsbootstrap-4bootstrap-vue

Creating text with stripes using CSS

Is there a way to create text with a striped color using CSS? I'm thinking about something similar to applying background-image or background-color to text. Or do I need to use a specific font that has colored stripes? ...

css

Why are my elements not appearing where I want them to in absolute positioning?

Could use some help with a seemingly simple question, I just need some clarity on this issue. Background: I am working on developing a complex website and one of my ideas involves generating a series of boxes on the screen. For various reasons that are t ...

htmlcsswebcss-positionabsolute

Stylish Responsive Design with HTML and CSS Centering

I am tasked with creating a landing page that features an image at the top with text, followed by a couple of videos and a 2-pixel strip line image that must stay at the bottom. <html> ... <body> <img src="topimage.png" alt="" /> <t ...

htmlcss

How to divide an HTML string into an array using PHP

I am in need of some assistance from you all. The issue I am facing involves dealing with a string of HTML that looks like this: <h4>Some title here</h4> <p>Lorem ipsum dolor</p> (some other HTML here) <h4>Some other title ...

phphtmlarraysaccordiondomdocument

What is the best way to ensure these elements are neatly stacked one on top of the other?

Is there a way to center this text div while keeping it behind a fading image on the page? I've tried using margin-left: auto; and margin-right: auto; but it doesn't seem to work. Am I missing something? I'm testing everything in Chrome, ju ...

htmlcssalignmentcenter

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png When I try to align the "Active" and "Primary" buttons undernea ...

htmlcss

Looking to adjust the height of a foreignObject element within an SVG?

Looking to dynamically change the height of a foreignObject within an SVG, while also needing HTML elements inside it (working with ngx-graph). <foreignObject x="1" y="1" width="335" [height]="foreignObjHeight(node.Dat ...

htmlangulartypescriptsvgforeignobject

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation. Below is my current JavaScript code: const sun = document.getEle ...

javascriptcssanimation

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

Changing the position of the icon in the bootstrap validator

I'm currently attempting to validate form fields in a web project. The goal is to achieve a specific result, similar to the image below: https://i.stack.imgur.com/EVeJf.png While I have made progress with a simple solution that almost meets the requi ...

javascriptjquerycsstwitter-bootstrapbootstrapvalidator

AJAX Finished Reply

I have successfully implemented a password change function on my website, but I am encountering an issue with displaying a success or fail message. Here is the structure of my HTML code: <form id="change_Pass" action="" method="post"> //stuff ...

phpjqueryhtmlajaxfieldset

When the page is refreshed, the value bounces back and forth between

I've encountered a strange issue on my page with 6 textboxes. Whenever I enter values into these text boxes and then refresh the page, the values seem to jump to the next textbox (the one after the next). For example, if I enter values as follows: [ ...

htmlfirefoxinput

Issue with displaying checkboxes in the dataTable table

I am currently working with dataTables and encountering difficulties displaying checkboxes on my tables. Below is the code that I have: <table id="employeeList" class="table table-sm table-bordered table-hover" cellspacing="0" width="200%"> &l ...

javascripthtmlbootstrap-4

Elements inside the Bootstrap 3 navbar are actually external

I am having trouble with the collapsible navbar, specifically the alignment of the right side. Here is the code snippet related to it: <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

cssnivo-slider

The utilization of `ngSwitch` in Angular for managing and displaying

I am brand new to Angular and I'm attempting to implement Form Validation within a SwitchCase scenario. In the SwitchCase 0, there is a form that I want to submit while simultaneously transitioning the view to SwitchCase 1. The Form Validation is fun ...

htmlangulartypescript

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...

jquerycssjsp

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

variableslessmixinscssshorthand

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass