Ways to align multi-line text at the center within a concealed Division

Question

Ways to align multi-line text at the center within a concealed Division

Struggling with aligning a paragraph in a div vertically. The paragraphs are within sliding boxes triggered by hovering over an image. Unable to use display: inline-block due to the default state being set to display: none;. Seeking guidance on the best approach to solve this issue, hoping for a simple solution that will make me feel silly. Thank you in advance.

Link to code example

Below is the CSS for the textbox divs:

.textbox {
    max-width: 610px;
    height: 155px;
    padding: 10px;
    display: none;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(5, 58, 24, 0.65) 10%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0 10px 10px 0;
}

Previously posted similar code, but unsure of proper questioning process or etiquette. Not a jQuery issue this time, as it's functioning correctly. Reposting due to CSS-related problem. (previous question link below)

How to handle a hide/show queue with multiple hidden divs smoothly

html css vertical-alignment multiline

Answer 1

Answer №1

If you apply display: table-cell to the .textbox divs, you can vertically align them by using vertical-align:middle. When the page loads, hide the divs with display: none on dom ready.

See it in action: http://jsfiddle.net/abhitalks/rBsLx/15/

CSS:

.textbox {
    max-width: 610px;
    height: 155px;
    padding: 10px;
    display: table-cell; /* set as table-cell */
    vertical-align: middle; /* allows for vertical alignment */
    ...
}

JS:

$(document).ready(function () {
    $(".textbox").hide(); // initially hide the divs
    ... // your custom code
});

I hope this explanation is helpful.

Answer 2

If you apply display: table-cell to the .textbox divs, you can vertically align them by using vertical-align:middle. When the page loads, hide the divs with display: none on dom ready.

See it in action: http://jsfiddle.net/abhitalks/rBsLx/15/

CSS:

.textbox {
    max-width: 610px;
    height: 155px;
    padding: 10px;
    display: table-cell; /* set as table-cell */
    vertical-align: middle; /* allows for vertical alignment */
    ...
}

JS:

$(document).ready(function () {
    $(".textbox").hide(); // initially hide the divs
    ... // your custom code
});

I hope this explanation is helpful.

Answer 3

Answer №2

If you're looking for a solution, you might find the following link helpful:

Check out this code snippet on Fiddle

.textbox {
max-width: 610px;
height: 155px;
padding: 10px;
display: none;
overflow: hidden;
background: linear-gradient(to bottom, rgba(5, 58, 24, 0.65) 10%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0)    100%);
border-radius: 0 10px 10px 0;

}

Answer 4

If you're looking for a solution, you might find the following link helpful:

Check out this code snippet on Fiddle

.textbox {
max-width: 610px;
height: 155px;
padding: 10px;
display: none;
overflow: hidden;
background: linear-gradient(to bottom, rgba(5, 58, 24, 0.65) 10%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0)    100%);
border-radius: 0 10px 10px 0;

}

Ways to align multi-line text at the center within a concealed Division

Answer №1

Answer №2

Similar questions

The alignment of h2 headings becomes disordered beyond a specific viewport width

Attempting to enhance my show/hide DIV code to efficiently target multiple divs

What is the best way to stop the max-height transition from automatically scrolling to the top of the page?

Obtaining every PDF file linked within a designated div/table section of a website

Guide on incorporating a "choose file" button to store an image in a mongodb database for a meteor application

What is causing this image to be off-center both vertically and horizontally on the table?

Code to dynamically add a div to an HTML template using JavaScript logic

Python code using Beautiful Soup to crawl web pages and extract JSON data

The drop-down menu does not maintain its selected option after the window is refreshed

Storing complex data using AJAX and HTML techniques

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

React component causing footer overlap

What changes do I need to make to improve the responsiveness of my website?

Similar to the :has() in jQuery, the equivalent in CSS

Issue with Bootstrap margins and padding

Using z-index to position a paragraph element behind other elements in a webpage

What exactly happened to my buttons when I transition to the mobile display?

What is the best way to make SVGs of varying sizes appear uniform in height?

What is the method for using jQuery to retrieve hidden fields with the visible attribute set to "false"?

Execute code after the page has finished loading, excluding instances of page refresh