Steps to achieve overflowing text above the border-top just like with the border-bottom when setting the height to 0px

Can text be vertically aligned above the border-top in HTML when using height:0px, similar to how it can be done below the border-bottom?

HTML:

<ul id="experiment" style="background: #FFDD00;">
    <li id="test1"><span class="v-align-bot">Chocolate</span></li>
    <li id="test2"><span class="v-align-top">Potato</span></li>
</ul>

CSS:

#test1 {
    height: 0px;
    border-bottom: 50px solid #648291; /*grey*/
}
#test2 {
    height: 0px;
    border-top: 50px solid #FA8723; /*orange*/
}

.v-align-bot {
    vertical-align: -50px;
}

.v-align-top {
    vertical-align: 50px;    
}

The Chocolate aligns below the border-bottom easily. The Potato aligns above the li but the border-top follows it as well.

TL;DR: How can I properly align BUTTONS in this fiddle below?

http://jsfiddle.net/jLYhg/

htmlcssmenualignmentborder

Answer №1

Isn't it strange how wishes work? For achieving this effect, consider that the border of an element extends beyond the element itself, making it a challenge to center text vertically within the borders. However, if you're determined to align the text in the middle of the borders, a few adjustments to your HTML and CSS are necessary.

To start, enclose the words within a simple span tag, then apply the following styles in your CSS:

Demo

.v-align-bot span {
    position: absolute;
    top: 15px;
}

.v-align-top span {
    position: absolute;
    top: -35px;
}

Additionally, ensure that you include position: relative; for the specified IDs below to prevent them from spilling over uncontrollably:

#test1 {
    height: 0px;
    border-bottom: 50px solid #648291; /*grey*/
    position: relative;
}
#test2 {
    height: 0px;
    border-top: 50px solid #FA8723; /*orange*/
    position: relative;
}

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

My React application running on localhost is struggling to connect with the IPFS node

I'm currently working on a React component that allows users to submit a .jpeg file and upload it to IPFS. I've successfully started the daemon and can view the IPFS node in the IPFS-go-companion add-on with the following configurations: Gateway ...

htmlreactjsnpmipfs

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

When bootstrap buttons are displayed inside a Vue component, there should be no spacing between them

Is this issue specific to the vue-loader or is it more related to webpack builds in general? Consider a basic HTML page with Bootstrap 4 loaded and two buttons added: <button type="button" class="btn btn-primary">Primary</button> <button t ...

cssvue.jswebpackbootstrap-4

Switch the selected option in JQuery UI dropdown using a clickable button

I have a code snippet that is almost working. My goal is to change the selection of a JQuery dropdown select combobox using a separate button named "next". What I want is for the JQuery dropdown to automatically switch to the next selection every time I c ...

javascriptjqueryhtmlcombobox

Change the way a button interacts with a different element

Currently, I am utilizing SlickSlider from http://kenwheeler.github.io/slick/ and attempting to integrate the Next and Prev buttons with other elements (specifically spans within another container). I have attempted the following: $('button.next&apo ...

javascriptjqueryhtmlsliderslick.js

The "hidden" class in Bootstrap 4 is not functioning as expected

I have Bootstrap v4 set up with its default CSS and JS. I'm attempting to use the classes hidden, hidden-XX-down, and hidden-XX-up on different divs, buttons, etc. However, it doesn't seem to be having any effect. All other classes are working fi ...

csshtmltwitter-bootstrapbootstrap-4

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

cssthree.js

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...

javascriptjqueryhtml

Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times. ...

htmlcsshovervisibility

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

CSS: How come this inline-block div is not appearing on the same line as intended?

I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...

css

Troubleshooting Problem with HTML Links in jQuery Accordion

After experimenting with adding a link to the HTML section of the accordion, I discovered that the link appears bold and does not open. I attempted to create a class or ID to fix this issue, but my efforts were unsuccessful. http://jsfiddle.net/q2Gm9/ ...

jqueryhtmlcsshyperlink

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

javascripthtmlnode.jsangular

Cursor vanishes until mouse movement detected (Chrome browser)

In the HTML page I created, the mouse cursor is initially set to none. However, there are certain circumstances where I need it to switch to crosshair. The issue I am facing is that the cursor does not appear unless the user moves the mouse. If the mouse r ...

htmlcss

Fixing issues with internal web page connections (#x) present in the HTML code (href="#x" id="x")

Can anyone come up with a brilliant solution as to why my internal links are not functioning properly on a webpage? I've coded the HTML with the usual <a href="#link"><button>Some Text</button></a> .... bunch of content .... & ...

htmlcss

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...

phpjqueryhtmlajaxjquery-ui

Getting URL parameters dynamically without reloading the page

Here's a particular issue I'm encountering: I've implemented the following function to fetch the GET Parameters from a URL. $(document).ready(function() { function getParam(variable) { var query = window.location.search.sub ...

javascriptjqueryhtmlurl

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Create a dialog box with rounded triangle corners

In the process of developing an application, we are incorporating a text display feature within a div that resembles a chat box direction, but with a curved style as depicted in the screenshot linked below. Desired design exemplified in purple Target des ...

htmlcssresponsive-design