Aligning a rotated paragraph in the middle of its parent container

Here is my current progress: http://jsfiddle.net/2Zrx7/2/

.events{
    height:100px;
    position: relative;
}
.tt_username{
    position: absolute;
    top:0px;
    height: 100%;
    width: 30px;
    background: #ccc;
    text-align: center;
}

.tt_username p{
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    background: #ff0000;
    font-size: 16px;
}

I am looking for a way to center the text inside the gray div. Even though the div's height remains constant, the text is dynamically generated through ajax. Due to this reason, I don't think the transform origin will help solve it. I prefer a CSS solution, but open to using JavaScript as well.

javascriptjquerycss

Answer №1

To achieve vertical alignment using CSS, you can use a combination of display: table, display: table-cell, and vertical-align: middle.

Check out this working example: http://jsfiddle.net/2Zrx7/3/

.events{
    height: 100px;
    position: relative;
    display: table; /* added */
}
.tt_username{
    /* position: absolute;*/
    top: 0px;  
    height: 100%;
    width: 30px;
    background: #ccc;
    text-align: center;
    display: table-cell; /* added */
    vertical-align: middle; /* added */
}

.tt_username p{
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    background: #ff0000;
    font-size: 16px;
}

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 causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

htmlcssvalidationdomcross-browser

Minimize the need for reflows and repaints to enhance CSS performance

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My ...

htmlcssfrontendweb-frontend

What is the method for incorporating locales into getStaticPaths in Next.js?

I am currently utilizing Strapi as a CMS and dealing with querying for slugs. My goal is to generate static pages using getStaticPaths and getStaticProps in Next.js. Since I'm working with multiple locales, I have to iterate through the locales to re ...

javascriptnext.jsstrapi

The functionality of JQuery's `.on("click"... is sporadically functioning

I have a code block that dynamically generates elements and includes event handling. However, the event handling sometimes works and other times it doesn't. I'm not sure how to debug this issue. Can someone help me figure out what might be causin ...

javascriptjquery

Storing dynamic content on a server and retrieving it for future use

I'm working on a webpage that allows users to create elements dynamically and I want to save those elements to the server. When someone else visits the page, I want them to see those saved elements as well. I'm not too familiar with web programm ...

javascriptjqueryhtmlajaxjson

Problem: Tailwind CSS styles are not being applied on responsive screens in Next.js.Issue: Despite

I'm attempting to apply a custom class to a div that should only be active on "md" screens. However, it doesn't seem to be working - <div className="md:myclass"/> tailwind-config.ts theme: { screens:{ 'sm': { ...

cssreactjsnext.jsresponsive-designtailwind-css

Adjust the button's width as the text changes to create a dynamic animation

I'm trying to create an animation effect where the width of a button changes whenever the text inside it is updated. I've attempted using useRef on the button itself to grab its clientWidth and then applying that value to a CSS variable in order ...

javascripthtmlcssreactjs

Encountering ReferenceError while running production build with Webpack

After upgrading to webpack 3.10.0 and Babel 6.26, I managed to fix my dev build but encountered issues with the prod build that I can't seem to resolve. This is the error message I am seeing: ERROR in ./src/index.js Module build failed: ReferenceErr ...

javascriptnpmwebpackbabeljs

Error encountered when entering a value in the Material UI keyboard date picker

When I select a date by clicking on the calendar, it works fine. However, if I initially set the date to empty and then type in the date, it does not recognize the format and displays numbers like 11111111111111111111. This breaks the date format. If I sel ...

javascriptreactjsmaterial-ui

What is the Vue.js alternative to setTimeout?

I'm currently in the process of developing a shopping cart feature using Laravel and Vue. In my system, when an item is added to the shopping basket, I want to display a confirmation message by toggling a Vue variable that is being monitored through a ...

javascriptvue.js

Retrieve the native interface from the Puppeteer browser/page context

Can a native interface be obtained from the Browser or Page instance to verify if an object is an instanceof this interface? For example, in a testing scenario with jest (where CanvasRenderingContext2D is not available due to being a Node context rather t ...

javascriptjestjspuppeteer

Steps to displaying a genuine Docx file within a Material CardMedia

Currently, I am facing an issue with positioning a docx file in my app. Interestingly, jpg and mp4 files are displaying correctly, but the docx file is not positioned as expected. If you want to try it out, simply open a doxc file. In the FileContentRend ...

javascriptreactjsmaterial-uidocx

Is it possible in Angular to generate a module and component without including a CSS file in a single command?

Is it possible to generate a Module linked to a component without automatically creating a css file? For example, the default method I've been using involves: ng generate module name / ng generate component name This results in the typical componen ...

javascriptnode.jsangularnpm

Setting up node.js for angular - serving static files with connect.static and running unit tests

Currently, I am in the process of setting up a basic node webserver by following a tutorial outlined in Pro AngularJS published by Apress. Node.js along with both the connect and karma modules have been successfully installed on my system. During the ins ...

javascriptangularjsnode.jsnpmkarma-runner

Exploring Tabletop.js to retrieve information from an array of data

Issue I am currently attempting to retrieve data from an array that contains two objects. I have implemented Tabletop.js to fetch the data from a public Google Spreadsheet, but I encountered an error in the console stating ReferenceError: object is not de ...

javascriptjqueryarraysobjecttabletop.js

Having trouble with @Url.Action not functioning properly in an AJAX request

When attempting to use AJAX to send a set of values from my view to my controller, I encountered an issue where the URL.Action method was not converting into the corresponding controller and action, but instead appearing as url.action in the URL. This is ...

c#jqueryajaxasp.net-mvcrazor

Achieving perfect alignment and spacing of columns with HTML/CSS

Just getting started with web development, very new to it. I am in the process of creating a SharePoint site for my workplace using the Modern Script Editor web part. The site will essentially be a resource page with linked buttons on it. I am facing diffi ...

htmlcssmultiple-columns

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

What is the reason for needing to export the function when importing a module in an Angular appModule?

I came across the following code snippet @NgModule({ declarations: [ ... ], imports: [ RoutingModule, SharedModule, JwtModule.forRoot({ config: { headerName: 'Authorization', tokenGetter: () => lo ...

javascriptangular

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

javascriptjqueryhtmlangularjsdatatables