Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)?
I want it to be aligned with the actual text content rather than the line height, in order to achieve the "perceived middle" of the text.
If you take a look at this, you'll notice the difference in the code snippet.
https://i.stack.imgur.com/Ousrm.gif
* {
font-family: sans-serif;
}
section {
float: left;
margin: 0 10px;
}
div {
display: flex;
flex-direction: row;
align-items: center;
height: 100px;
}
h1 {
height: 1em;
line-height: .8em;
}
h1,
h2 {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
font-size: 40px;
}<section>
<p>Height set to 1em</p>
<div>
<h1>oTg</h1>
<svg aria-hidden="true" class="svg-icon iconIndent" width="18" height="18" viewBox="0 0 18 18"><path d="M0 5v8l4.5-4z"></path></svg>
</div>
</section>
<section>
<p>Default height</p>
<div>
<h2>oTg</h2>
<svg aria-hidden="true" class="svg-icon iconIndent" width="18" height="18" viewBox="0 0 18 18"><path d="M0 5v8l4.5-4z"></path></svg>
</div>
</section>Is there a way to set the height of an h3 element based on the tallest version of its siblings, but only for certain elements? I have a list where CSS organizes items into rows of 3. The last li element in each row has the class "endRow". I want to find t ...
I'm having some trouble explaining this, but here it goes.. My home.php file looks like this: <body> <div id='leftColumn'> <?php include ('includes/roomQuery.php') </div> ...
I need assistance with displaying a text field based on age validation. The requirement is to show the input field only if the age is less than 18. Below is the code snippet I am currently working with: <form [formGroup]="form"> ...
Encountering an error when using next js Image next.config.js: module.exports = { images: { domains: ['localhost'], }, }; Error image: https://i.stack.imgur.com/RvsdH.png I am struggling to understand how to correctly set up the image ...
I have created an angular directive that functions like a carousel. To keep the dom element count low, I delete elements from the dom and then re-insert them using angular.element to select, remove, and insert items as shown below: app.directive('myD ...
Struggling to resize four images inside a div as the browser window is resized? Frustrated that when the window is too small, the last image moves to the next row? Want them all to stay in one row? Despite searching for solutions, adjusting max-widths to 2 ...
I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...
I am currently facing an issue with a form that includes an input file implemented using Bootstrap 4. The functionality of this input file depends on Javascript: when the user clicks on the "browse files" button, a window opens for file selection, and upon ...
After creating a test page, this is the structure that I have set up: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <title>Get JSON Value</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...
From dropdown lists to hover menus with fly-out options, there are various ways to present content on a website... I am managing a comprehensive list of U.S. military bases across the world for my website. This list includes both active and inactive bases ...
I have created my toolbar: <header className='toolbar'> <nav className='toolbar_navigation'> ///hamburger: <SideDrawer drawerClicked = {props.drawerClicked} /> ///LOGO ...
Currently, I am delving into the world of creating a web scraping tool using VBA to extract event details and store them in an Excel sheet. Within this endeavor, I am faced with deciphering HTML code snippets that resemble the following: <div class="a ...
After writing the following HTML and CSS, an issue arose when resizing the page: <div style="position: relative;"> <img width="100%" src="images/some.jpg"> <div class="header"> <h1>my header</h1> ...
I need to update the "Last" Price for MarketName USDT-BTC. How can I change the value from 16750.00000001 to 17000.00000001 and then transmit it through my API? { "success":true, "message":"", "result":[{ "MarketName":"USDT-BTC", "High":16 ...
Utilizing Selenium for testing my Perl cgi script has been successful overall, but I've encountered a unique issue in one particular test case. In this scenario, the cgi script returns XML content to the web browser instead of the expected HTML conten ...
I need to iterate through a dynamically-created object that contains properties with values. The issue is that the property names in this dynamic object contain spaces, which are not allowed in JavaScript object properties. How can I loop through this ob ...
Within my controller, I often set: $scope.currentThing.data For different parts of my template, sometimes I require currentThing.data.response[0].hello and other times currentThing.data.otherStuff[0].goodbye //or currentThing.data.anotherThing[0].goo ...
Can a Base64 encoded image be loaded as a background image URL without exposing the actual encoded string in the page source? For example, if a Node API is used to GET request at "/image", it returns the serialized Base64 data. res.json("da ...
I am presented with the following HTML structure: <iframe id="screenshare" ref="screenshare" class="fullScreen2"></iframe> To dynamically fill the <iframe> element, I am utilizing JavaScript through the below function: func ...
Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...