What's the best way to vertically center text in a div with overflow hidden?

In my ASP GridView, I am trying to display a table with a fixed number of lines in each TD element. To achieve this, I have decided to place a div inside each TD so that I can customize the height and layout.

table.XDataGridView td div.inner-table-div {
height: 32px;
padding: 1px;
overflow: hidden;
display: block;
}

.rfTaskExecutionWrapper td {
    min-width: 100px;
    font-size: 12px;
}

https://i.stack.imgur.com/nBQB6.png

I want the content in both columns to be vertically aligned in the center and only show 2 or 3 lines of text maximum. Even though I have set a limited height, I am still seeing some text from the third line, which is not desired.

The solution needs to be compatible with Chrome and Internet Explorer 7 on Windows CE.

htmlcssasp.net

Answer №1

Aligning the content of a table cell vertically can easily be achieved by utilizing the CSS property vertical-align: middle within your td element.

To ensure that only two lines are visible in the second column, you can employ line-height. With the div's height set to 32 pixels and a top and bottom padding of 1 pixel each, there remains 30 pixels for actual content (assuming standard box-sizing). By adding line-height: 15px to your div, you will restrict visibility to just two lines without any additional third line at the end.

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

Restrict printing loops within the designated division layer

Is there a way to limit the number of rows displayed horizontally when using foreach? I only want to display 7 rows. Can this be achieved with CSS or pagination? Here is an image illustrating the issue: https://i.sstatic.net/yJx3N.png Currently, it print ...

phpcsslaravellaravel-5bootstrap-4

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

cssreactjstypescriptmaterial-ui

"Efficiently setting up individual select functions for each option in a UI select menu

I've integrated UI Selectmenu into my current project UI selectmenu includes a select option that allows for setting select behavior across all selectmenu options, as shown in the code snippet below: $('.anything'). selectmenu({ ...

javascriptjqueryhtmljquery-uiselect-menu

Retrieving information from emails, yet providing disorganized text fragments

I have developed a method to remove html, style/script tags, and new line tags from the source code of email pages: def extract_message(url): markup = open(url) soup = BeautifulSoup(markup, "html.parser") for script in soup(["script", "style"] ...

pythonhtmlemailbeautifulsoup

Showcasing menu options in a double-column layout - MUI Menu

Just starting out with React. I'm using MUI menu to display items in two columns, but I've noticed a significant gap between the menu items when using grid display with repeat 2 and 1fr. display:'grid' , gridTemplateColumns : 'repe ...

cssreactjsmaterial-ui

Encountering a 503 Error in Loading .js Files from Index.html in a .NET 7.0 Angular Application

I recently came into possession of an Angular project that I am trying to set up in IIS, but I am encountering some unusual behavior. Since I am relatively new to Angular, I ask for your patience as I navigate through this issue. Upon loading the website, ...

javascriptc#htmlangular

Tips for avoiding overflow while utilizing animations

In my current project, I am facing an issue with a container div that has the CSS property overflow: auto which cannot be removed. Inside this container, there is another div that toggles between showing and hiding using an animation triggered by a button ...

htmlcss

The arrangement vanishes when using identical html/css coding

When using the same HTML/CSS coding, the layout disappears and appears misaligned on one page but works perfectly on another. The issue seems to be that the first section of the main area is getting a width of 938px instead of 5px. I've tried adding w ...

htmlcss

Increasing the height of a DIV that is positioned beneath another DIV with a set height

My goal is to convey my message visually. I hope you can understand without too many words. The issue I am facing is that when trying to stretch a 100% height DIV under another DIV with fixed height, it does not stretch properly. If you want to experiment ...

htmlcssheightstretch

Azure Chatbot that logs conversations in Webchat whenever the user selects 'none of the above' option

Recently, I've delved into the world of web chat services and embarked on a journey to craft a chat bot using pure JavaScript code that can seamlessly integrate into any HTML file. Despite consulting Microsoft's documentation, I find myself in a ...

javascripthtmlazure

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

javascriptjqueryhtmlcssmodal-dialog

Troubleshooting CSS loading issue on iPhone 5 Safari with Responsive Design

I am trying to figure out why my website (Link) is not displaying correctly with responsive design on iPhone5 Safari Browser, even though it works fine on desktop browsers like IE, Chrome, and Safari. It also displays correctly on HTC and Samsung Galaxy de ...

htmlcssresponsive-designmobile-safariiphone-5

Showing a hidden div after an unsuccessful AJAX call

Encountering an issue with displaying a div notification using the code snippet below: $.ajax({ url: url, cache: false, async: false, success: function (data) { response = jQuery.parseJSON(data); }, error: functi ...

jqueryhtmlcssajax

Strategies for preventing the appearance of empty rows associated with unused <tr> elements

I currently have multiple asp.net panel controls that I am displaying using an html table. These panels are initially set to visible = false, but depending on the data retrieved from the database, some of the panels will be made visible. The issue arises w ...

asp.nethtml

What is the process of modifying a row within an HTML grid?

I created a grid using the following code snippet: newcontent += "<tr><td class=\"row\">" + a[i][0] + "</td><td>" + a[i][1] + "</td><td class=\"edit\"><img class=\"editrow\" name=\" ...

jqueryhtmlgrid

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

javascriptcssvue.jsvuejs2vue-component

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

javascriptcssangularjsiframe

Placing a logo to the left of a UL list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> & ...

jqueryhtmlcss

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

htmlcssmenuscreen-resolutionfont-size

The getElementByID function functions properly in Firefox but does encounter issues in Internet Explorer and Chrome

function switchVideo() { let selectedIndex = document.myvid1.vid_select.selectedIndex; let videoSelect = document.myvid1.vid_select.options[selectedIndex].value; document.getElementById("video").src = videoSelect; } <form name="myvid1"> <s ...

javascripthtml