Tips for aligning text vertically within a definition list

I am working on a definition list where I need to vertically center the text within each dd element.

dl, dt, dd {
    margin:0;
}
dt {
    background: blue;
}
dd {
    min-height: 100px;
    background: gold;
    border-bottom: 3px solid white;
}
<dl> 
    <dt>Fruit</dt>
    <dd>Apple</dd>
    <dd>Banana</dd>
    <dd>Pear</dd>
</dl>

I attempted to use the table cell method from this JsFiddle, but it caused the dd elements to display in a single line instead of stacked on top of each other.

Is there a way to achieve a stacked list with the text vertically aligned within each gold-colored section?

Just a reminder: I prefer not to use flexbox and the text may be multi-lined.

htmlcss

Answer №1

Utilizing additional tags inside the <dd> element allows for a creative solution. By setting each <dd> as a table and each <span> inside as a table-cell, we can effectively control the vertical alignment.

This method is versatile and can handle multiple lines of text seamlessly. Take a look at the demo below for a practical example:

dl, dt, dd {
    margin:0;
}
dl {
    width: 100px;
}
dt {
    background: crimson;
}
dd {
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: 100px;
    background: gold;
}
dd span {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid white;
}
<dl> 
    <dt>Fruit</dt>
    <dd><span>Apple</span></dd>
    <dd><span>Banana, I love bananas.</span></dd>
    <dd><span>Pear</span></dd>
</dl>

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

Acquire dynamically loaded HTML content using Ajax within a WebView on an Android

I have been attempting to extract the content of a web page on an Android platform. Despite trying JSoup, I faced a limitation with ajax support. As an alternative, I am endeavoring to embed the URL within a hidden web view and retrieve the HTML in the on ...

javascriptandroidhtmlajaxandroid-webview

What is the method for configuring automatic text color in CKEditor?

https://i.sstatic.net/yEM3p.png Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Tr ...

javascripthtmlcssckeditoreditor

In PHP, you can use the `echo` statement to output an HTML input

Incorporating HTML into PHP using heredoc methodology can sometimes lead to challenges when trying to retrieve user input variables. Attempting to access the input variable with $_GET["input"] may result in an error message indicating an undefined index: ...

javascriptphphtml

Navigational menu header leads to specific location on the page

I need the dropdown menu header to both open the related menu and display the content of the first element of the submenu, which is an anchor link on the page. Here is the HTML code for the Dropdown Menu: <div class="collapse navbar-collapse" id="myNa ...

javascripthtmldrop-down-menuanchor

Inject AJAX response text into a specific div element

I am working on a PHP file that retrieves MySQL results using post information from an AJAX request. The PHP file is set to echo the information from the MySQL table. Now, I need help figuring out how to use JQuery to load this response text into a DIV e ...

phpjavascriptjqueryhtml

What is the best way to split a Bootstrap col-md div in half vertically?

I am attempting to create the following layout using the Bootstrap grid system. Within a container <div class="row">, there are two divs occupying half of the width each (<div1> and <div2>). The height of <div1> will vary based on t ...

csstwitter-bootstrap

The calculator program fails to compute the width

My table has 4 columns with different widths: column 1: fixed width of 500px; column 2: calc(33% - 165px); column 3: calc(33% - 165px); column 4: calc(33% - 165px); Despite having the same value for the last 3 columns, their actual widths are different. ...

htmlcss

The best practices for coding Jquery plugins to adhere to style guidelines

I have been grappling with this issue for quite some time now, and I am seeking feedback from others. I am in the process of creating a personalized library to expedite web app development, and I want to ensure that I adopt the correct approach. My intenti ...

javascriptjquerycss

Get the nearest offspring of the guardian

I have a main 'container' div with multiple subsections. Each subsection contains 1 or 2 sub-subsections. Let's say I have a variable that holds one of the subsections, specifically the 4th subsection. This is the structure:container > s ...

javascriptjqueryhtml

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

Styling the footer of a webpage using CSS to adapt to different browser

I am currently working on a webpage that includes a footer. The footer is positioned correctly, but I encounter an issue when resizing the browser from bottom to top. For further details, please refer to the image below: Below is the CSS code for my foote ...

csshtmlfooter

Encountering an undefined variable error with Ruby on Rails 6 Bootstrap after restarting the server

I'm facing an issue in rails 6 where upon server restart, I encounter an Error: Undefined variable. Oddly enough, if I comment out the SCSS variables in my files, refresh the page, then un-comment them and refresh again, everything works as expected a ...

cssruby-on-railsrubybootstrap-4

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

javascripthtmlgoogle-chrome

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

When loading dynamic content, I use the following method: $('#my-div').load('my.html'); The code inside my.html looks like this: <html> <head> </head> <body> <script> $(fu ...

javascriptjqueryhtmlajax

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

htmlcsscss-floatvertical-alignment

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

What is the best way to enlarge a thumbnail using CSS?

Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...

htmlimagecss

In search of a render function that can effectively apply styles to HTML strings using React JS

I have been struggling to convert the result field value, including HTML attributes string, into respective styles for one column in my antd table. Below is the string I am trying to convert: The exhaust air requirements for fume hoods will be based on m ...

javascripthtmlreactjsecmascript-6antd

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

The checkbox is failing to display as checked even after its value has been dynamically set to true

Currently, I am immersed in a project within ASP.NET MVC that involves displaying data on a page where users can interact by selecting checkboxes to make changes. In cases where there are numerous checkboxes present, a "Select all Checkboxes" button become ...

javascriptjqueryhtmlasp.net-mvc