A guide on centering two elements vertically within a single table cell

I am facing an issue with a table that has 5 columns, all vertically aligned to the middle. The first 4 columns contain text that is properly aligned in the middle of the cell. However, the last column is a bit different as it consists of two divs. The first div contains some text floated to the left, while the second div has a button floated to the right. The HTML code for this last cell is as follows:

 <td>
        <div style="float:left; width:50%">
              Text Not In Middle Of Cell
        </div>
        <div style="float:right; width:50%">
               <button type="button">Button Text</button>
        </div>
    </td>

Upon inspecting the image below, it is evident that the text is not vertically aligned in the middle of the cell. Is there a way to center the text vertically in the cell so that it aligns perfectly? I attempted to add vertical-align: middle to the divs, but unfortunately, it did not yield the desired results. Since the div's height is determined by the text, aligning the text vertically did not work as expected. Is there an alternative solution to address this problem? Any assistance would be greatly appreciated!

https://i.sstatic.net/u0DCz.png

htmlcss

Answer №1

Utilize the power of flexbox to center content.

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

.container button {
  margin-left: .5em;
}
<td>
  <div class="container">
    <div>
      Text Not In Middle Of Cell
    </div>
    <div>
      <button type="button">Button Text</button>
    </div>
  </div>
</td>

Answer №2

Of course, it is possible to achieve this using the :before pseudo-element, but make sure to specify the height of your div element.

Here is an example code snippet: 

     .text_div{
       float:left;
       width:50%;
       height: 100px;
       background-color:#f00;
}
.text_div:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.text_div{
vertical-align: middle;
display: inline-block;
}
<td>
    <div class="text_div">
        <a>Text Not In Middle Of Cell</a>
    </div>
    <div style="float:right; width:50%">
           <button type="button">Button Text</button>
    </div>
</td>

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

The revolutionary Bootstrap 8 grid layout system

I am in need of a system that consists of 8 columns, and I require a Bootstrap class that will allow an HTML element to span across 2 or more of the columns within the grid. The purpose of this is to create a PMS (Property Management System), where certai ...

htmlbootstrap-4

angularjs dropdown - customize selected item appearance

My dilemma involves a list of countries, each with a code and name. When the list is expanded, I aim to show "code + name" (e.g. "+44 United Kingdom"). However, once a country is selected, I only want to display the code ("+44"). Is it achievable using Ang ...

javascriptangularjshtml

Encountering a challenge in Angular 8: Unable to locate a supporting object matching '[object Object]'

I am having an issue trying to retrieve the Spotify API from the current user's playlists. While I can see it in my console, when I attempt to insert it into HTML, I encounter the following error: ERROR Error: Cannot find a differ supporting object ...

javascripthtmlangulartypescriptangular8

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

javascriptcssalignmentvertical-alignment

Updating the value of an Angular select on change is not being reflected

If the select element is changed, the value should be set to something different from what was selected. There's a feature in place that only allows 4 item types to be selected at a time; if more than 4 are chosen, the value reverts back to its origin ...

javascripthtmlangulartypescriptangular6

Issue with fetching API data and sending it to the Node server

My node backend is all set up and running smoothly for GET requests, but I'm facing an issue with POST requests as the data doesn't seem to be getting sent to the backend. Here's the code snippet: fetch("http://localhost:3000/", ...

javascripthtmlnode.jspostfetch-api

Generate a chart using the REST object by organizing the information in a column format

I am currently working with a REST service that returns a specific object with multiple values and IDs. Here is an example of the object: [ { "id": 100, "value": "2452" }, { "id": 100, "value": "2458" }, { "id": 1, "value ...

htmlangularjsuser-interface

Utilizing Ant Design Icons without an Internet Connection

In my current project, a reactJS application utilizing ant design for the UI was recently deployed to production on locked down computers. These computers lack internet access, causing ant design icons on modals to appear as empty boxes. Upon investigation ...

cssreactjsantdoffline-mode

The Tahoma font is not being displayed properly in HTML emails on mobile devices

I am struggling to ensure that the font "tahoma" displays correctly in an HTML email. While it works fine on desktops, the font "tahoma" does not appear on mobile clients. How can I fix this issue? Below is the code for the email I am sending: <h3 ...

htmlcssemailfonts

Python - Selenium: A guide to locating elements based on color

I have a situation where I need to select only the "Claim" button from the first div, even though both div cases are very similar. Is using background color a good way to identify my element? Or do you have any other ideas? 1. <div class="well well-sm ...

cssselenium

css displaying inconsistently on Mi Browser mobile view

Everything looks great in Chrome (mobile), but for some reason when I test it out on Mi Browser, the CSS isn't displaying correctly. I'm working with Next.js and here's a snippet from my head tag: <Head> <meta charSet="UTF-8&q ...

htmlcssnext.jsmobile-browserxiaomi

Applying Vue Quill CSS to the initial Quill Editor component exclusively and tips for personalizing the toolbar

I have encountered an odd CSS issue while using the vue-quill package in my project. Each comment has its own quill editor for replying, and I temporarily set the isOpen prop to true for debugging purposes. This results in a quill editor being displayed un ...

javascripthtmlcssvue.jsvuejs3

Issue with Bootstrap margins and padding

While creating an application form from scratch with Bootstrap, I encountered a peculiar issue. The element with ID officeaddress is missing from the HTML page upon loading. I've experimented with the my class in Bootstrap and attempted to add line br ...

htmlwebfrontendbootstrap-5

Discovering all input elements by utilizing nextAll in jQuery

Here is the HTML structure: <div class="field phone"> <input type="text" maxlength="3" /> </div> <div class="field phone number1"> <input type="text" maxlength="3" /> & ...

javascriptjqueryhtmlinputfocus

Ways to include multiple tags ahead of one tag in BeautifulSoup

Looking for a solution: I have a single tag I want to insert three a tags before it with different text. Here is what I have tried: headTag = soup.find_all('h1', text='Attendance List') aTag = soup.new_tag('a') aTag['c ...

pythonhtmlbeautifulsoup

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...

htmlcss

Position object in the middle using jQuery and CSS

Trying to center an absolutely positioned object horizontally using CSS and jQuery is proving to be a challenge. The use of jQuery is necessary due to the varying widths of the objects. Hover over the icons in my jsFiddle to see the issue. Check out the j ...

javascriptjqueryhtmlcss

A HTML table featuring a horizontal scroll and cells with a fixed width for optimal visibility

Seeking assistance with creating an HTML table with a horizontal scroll and fixed cell width. I have managed to implement the horizontal scroll feature using the code below, but struggling to adjust the cell widths. Any tips or suggestions would be greatly ...

htmlcssbootstrap-4

I am experiencing issues with my INSERT INTO statement

I've been working on creating a news system that allows users to fill out a form to post an article. However, despite multiple attempts and methods, my INSERT INTO query doesn't seem to be functioning properly. I have two separate files for this ...

phphtmlmysqlinsert-into