What steps can be taken to align the description in the center of the div?

I am working on an image slider where the description slides in from left to right. My goal is to align the text justified and center it on the page. However, when I try adding CSS properties, it doesn't seem to have any effect.

setting.$descpanel=$('<div class="fadeslidedescdiv" valign="center"></div>')
        .css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:0,right:setting.dimensions[1],bottom:0, font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
        .appendTo(setting.$wrapperdiv)
    $('<div class="descpanelbg" valign="center"></div><div class="descpanelfg" valign="center"></div>') //create inner nav panel DIVs
        .css({position:'absolute', left:0, top:150, width:setting.$descpanel.width(), padding:'20px'})
        .eq(0).css({background:'#000000', opacity:0.7,}).end() //"descpanelbg" div
        .eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
        .appendTo(setting.$descpanel)
javascriptcss

Answer №1

To style the div with the existing class using CSS, you can do the following:

.descpanelfg { text-align: center; }

If you want to align the content vertically (not in the center), you will need to set a fixed height first. For example:

.descpanelfg { height: 20px; line-height: 20px; vertical-alignment: middle; }

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

What are some techniques to create a dynamic background for a div that

I've been attempting to create responsive background images within a div element, but unfortunately, my current method is not producing the desired results. Below is an excerpt of my CSS code: .block-main{ background: url(images/ohdaihiep/bg1. ...

cssbootstrap-4responsive-designbackgroundresponsive-images

Toggle the row to expand or collapse upon clicking it

After extensive research, I have been unable to get the row expansion and collapse feature to work in my script. Here is my current script: <thead> <tr> <th width="5" class="cb"><input type="checkbox" id="cbcall" /& ...

javascriptjquery

How can the printing of content be adjusted when the browser zoom function is activated?

Is there a way to prevent the content from zooming when printing while the browser is zoomed in? The goal is for the printing (using iframe) to remain unchanged even if the browser is zoomed. I attempted: document.body.style.transformOrigin = 'top le ...

javascripthtmlcssreactjsprinting

Electron triggers MouseLeave event on child elements

Dealing with mouse hover events can be a bit tricky, especially when working with AngularJS in an Electron-hosted app. Here's the HTML template and script I'm using: HTML: <div id="controlArea" (mouseenter) = "onControlAreaEnter()" ...

javascripthtmlangularjstypescriptelectron

Typescript's forEach method allows for iterating through each element in

I am currently handling graphql data that is structured like this: "userRelations": [ { "relatedUser": { "id": 4, "firstName": "Jack", "lastName": "Miller" }, "type": "FRIEND" }, { "relatedUser": ...

javascriptreactjstypescriptreact-nativeforeach

Exploring navigation within a React application

After attempting to develop a react native application and finding it too difficult for my needs, I decided to switch to React. As a beginner in web programming, I recall learning about the concept of 'navigation' in react native, including vario ...

javascriptreactjsreact-routermaterial-ui

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

javascripthtmlcssbootstrap-5

Unable to turn off X-Powered-By: Express

After attempting to use app.disable("x-powered-by"); without success, I came across some helpful posts on the topic: how to remove X-Powered-By in ExpressJS Can't get rid of header X-Powered-By:Express I am using "express": "^4.16.4" as backend a ...

javascriptnode.jsreactjsexpress

When working with Angular 2 and Typescript, a common error message that may be encountered is "TypeError

Currently diving into Angular 2 and encountered a stumbling block while attempting to create a service. Despite my efforts in finding a solution, I seem to be missing something crucial. Error: A problem arises in angular2-polyfills.js:1243 with the error ...

javascriptangularjstypescriptangular

Navigating through cors in next.js

Currently, I have set up my front end using Netlify and my backend using Heroku with Next.js For the fetch request on the front end, here is an example: fetch(`https://backendname.herokuapp.com/data`, { method: 'POST', headers: { & ...

javascriptherokunext.jscorsnetlify

Display the properties of the nested object

I am trying to extract and print the postal_code value from the JSON file provided below: { "results" : [ { "address_components" : [ { "long_name" : "286", "short_name" : "286", "t ...

javascriptjsonajax

What causes the element to load with a transparent appearance? And why is my JavaScript code overriding the hover effect on it?

My goal is to have an element fade out when clicked and then fade back in when its space is clicked again. I also want the opacity of the element to be 0.9 instead of 1 when visible. I've encountered two issues with my code. First, the hover selector ...

javascriptcss

The specified property 'length' is not found on type OkPacket within the mysql2 module

In my code example below, I am simply showcasing a specific scenario: this.getCode = (code: string): Promise<codeObject | false> => { return new Promise((resolve, reject) => { pool.query('SELECT * FROM ?? WHERE code = ...

javascriptnode.jstypescriptnode-mysql2

Learn how to extend components in Typescript and determine necessary arguments. Discover how to apply this knowledge in an Angular use case by extending mat-side-nav

Background: The Angular Material Design component known as mat-side-nav operates in a specific structure for its dynamics: <mat-sidenav-container> <mat-sidenav> </mat-sidenav> <mat-sidenav-content> </mat-sidenav-conten ...

javascriptangulartypescriptoopangular-material2

Allow Vue to handle the registration of the datepicker event

Is there a way to notify Vue when the datepicker changes the selected date? new Vue({ el: '#app', data: { termin: '' }, computed: { }, methods: { } }) This is just an input field: <div id="app"> <div c ...

javascriptuikitvue.jsvuejs2

Alternative to Webpack for modifying global variables in preloaded modules

Is there a way to shim moment.js in webpack similar to how it is done in browserify? I have developed a widget using npm and webpack, which will be included in another application. The other app already has moment.js loaded via a script tag. I want to av ...

javascriptnode.jsnpmbrowserifywebpack

Parse JSON files from a folder and concatenate them to a CSV using Node.js

Thank you for offering your help. I have a collection of JSON files located in a directory with unknown names. I need help with the following: (1) Reading all the JSON files (2) Appending the data from the JSON files to output.csv (3) Adding "-Appended" t ...

javascriptjsonnode.jscsv

Map does not provide zero padding for strings, whereas forEach does

Currently working on developing crypto tools, I encountered an issue while attempting to utilize the map function to reduce characters into a string. Strangely enough, one function works perfectly fine, while the other fails to 0 pad the string. What could ...

javascripttypescript

Tips for extracting data from a JSON file

I'm attempting to retrieve a list of music genres from my json file using PHP and JQuery ajax. Here is the format of my json file [ "12-bar blues", "2 tone", "2-step garage", "4-beat", "50s progression", "a cappella", "accordion", " ...

javascriptphpjqueryjsonajax

ngAnimate - Animation not activating on recurring custom directive

I am trying to implement ngAnimate on a custom directive that is repeated using ng-repeat in my AngularJS application. The animations function correctly when I use ng-repeat on a simple HTML list-item. However, when I replace the list-item with a custom di ...

cssangularjsanimationangularjs-directiveng-animate