Adjust the vertical alignment of spans within a div while ensuring that their height remains dynamic

Having a bit of trouble with my CSS.
I have a single div with 3 columns inside: a span, an h3, and another span.
Here's what I'm aiming for:
- The div should adjust its height based on the content within the h3 tag
- The height of the h3 tag should also adjust based on its content
- The spans should be vertically aligned to the middle

<div>
   <span>span 1</span>
   <h3>text</h3>
   <span>span 2</span>
</div>

If anyone could help me out with styling this setup, I would greatly appreciate it. Thank you.

javascriptjqueryhtmlcss

Answer №1

div > * {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid red;
}
h3 {
  font-size: 30px;
  height:200px;
}
<div>
  <span>span 1</span>
  <h3>text <br />text</h3>
  <span>span 2</span>
</div>

Answer №2

Here is a simple solution that you can implement.

div {height: 200px;}
span, h3 {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
    margin: 0;
}
<div>
   <span>span 1</span>
   <h3>text</h3>
   <span>span 2</span>
</div>

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

Angular: Promise updating array but integer remains static

At the moment, I have a factory and a controller set up. The factory is responsible for updating with items retrieved from an endpoint along with the total number of pages of data. While my data array seems to be working properly, the pageCount (an integ ...

javascriptangularjspromiseangular-promise

Efficiently transmitting WebSockets events/messages to multiple controllers in AngularJS

Incorporating AngularJs, I created a factory to manage a WebSocket connection effectively. Here is the code: .factory('WebSocketConnection', function () { var service = {}; service.callbacks = []; service.connect = func ...

javascriptangularjscallbackwebsocket

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...

javascripthtmlextjssencha-touchsencha-touch-2

Turn off Node.js Caching for Good

My Node.js website seems to be stuck using a cached version even after updating the code and using the -w option. I need to figure out how to disable caching with Forever in Node.js and completely uninstall it. I found this answer that confirms it caches: ...

javascriptnode.jsforever

Axios removes the async functionality

Is there a way to achieve the same functionality without using the async function? async EnvioLogin() { const response = await axios.post("api/auth/login", { email: this.email, password: this.password, }); localStorage.setItem(" ...

javascriptvue.jsaxios

Changing the slider based on the format of the price and user input value

Is there a specific place where I should use the .toFixed(2) method to ensure fixed formatting for my range slider output? For example, transforming 1.9 to 1.90 or 2 to 2.00. Additionally, is it feasible to have an input field where the user enters a pri ...

javascriptjqueryinputformattingslider

React-Query leads to variable becoming undefined upon component update

I'm currently utilizing dnd-beautiful-kit to organize Cards on my platform. Each Card contains specific information, as shown in the video, along with an Avatar component. The Avatar can either display the user's image (if avatarSource exists) or ...

javascriptreactjsdrag-and-dropreact-query

Obtain the HTML source code for a webpage that has been scrolled down using Python web scraping with Selenium

Even after executing a script to scroll down, I am only able to retrieve the initial html code containing 11 hotels. How can I access the entire data source code by scrolling down to scrape all the available hotels? If the driver.execute_script is suppose ...

javascriptpythonseleniumweb-scraping

Show the button's value inside a div when clicked using Javascript and HTML

I am troubleshooting an issue where the value of a button is not displayed in the picked_letters div when the button is clicked, despite having the appropriate code in both the html and javascript files. The structure of the html file is as follows: < ...

javascripthtmlbutton

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Transform a string representing a specific time frame into a Unix timestamp using jQuery or JavaScript

I am trying to generate a Unix Timestamp for each date/time string that is generated within a foreach loop. Can anyone provide guidance on how to convert the string Mon Aug 08 2016 10:09:42 GMT+0100 (BST) into a Unix Timestamp to facilitate comparison? O ...

javascriptjqueryunix

Tips for integrating the legacy Twitter API method into an ASP.Net website

In the past, I utilized a method to display tweets from my Twitter account on a feed for my website customers: <ul id="twitter_update_list"><li>Twitter feed loading</li></ul> <script type="text/javascript" src="http://twitter.co ...

javascriptasp.nettwittertwitter-oauth

Loop through an array of objects in Node.js using ng-repeat

I have integrated angularJS with a node back-end that transmits data using socketio. When I attempt to display the data using ng-repeat, I encounter an issue. If I set the initial data within the controller, ng-repeat functions properly. However, if I add ...

javascriptnode.jsangularjssocket.io

Banner with video background (not taking up the entire page)

I'm currently working on a website project that involves using a YouTube video as the banner, but I'm facing some challenges in making it work correctly. So far, this is what I have: #video-background { position: absolute; right: 0; top:1 ...

jqueryhtmlcssyoutube

Utilizing Google Charts and SteppedAreaChart to visually track the evolution of value over time

My task involves extracting value history data from the database. Every time the value changes, the trigger saves the old value, new value, as well as the date and time of the change. For a web application, I need to visualize these changes. Since the val ...

javascripthtmlgoogle-visualization

Issue with updating dropdown values in real-time in React

I am a beginner with React and I have a question regarding fetching dropdown values from the backend. Despite using async-await functions, the list is not getting populated with items. Any assistance in this matter would be greatly appreciated. Here is th ...

javascriptreactjsasync-awaitaxiosdropdown

Developing user registration and authentication using Backbone.js in conjunction with Django Rest Framework

In the process of developing my app, I am utilizing backbone.js for the frontend and django-rest-framework for the backend. My goal is to enable user registration, login, logout functionality, and be able to verify whether a user is logged in using backbon ...

javascriptdjangobackbone.jsdjango-rest-framework

Navigating the complexities of ASP.Net Ajax and Postback

Despite reading numerous posts on AJAX in ASP .Net, I am still hesitant about utilizing updatepanel. Even with the use of updatepanel, the entire life cycle of an element is still processed. For instance, a basic operation of adding two numbers and displa ...

jqueryasp.netajaxpostback

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...

jqueryasp.netcsshtml

Transfer PHP's uniqid() function to real-time using JavaScript with jQuery

Seeking a compact JavaScript(jQuery) code snippet to achieve this: date("r",hexdec(substr(uniqid(),0,8))); Your assistance is highly appreciated. Thank you. ...

phpjavascriptjquery