"Place text at the center of a div that is rotated

I'm facing the challenge of centering a heading both vertically and horizontally within a div that has been rotated 45 degrees (transform:rotate(45deg);). Due to this rotation, I have attempted to counteract it by rotating the heading in the opposite direction (transform:rotate(-45deg);) and then applying typical centering techniques, but without success. What would be the solution for achieving this?

#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue; 
height: 300px;
width: 300px;
margin:0 auto;
}

h1 {
    position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
<html>
  <body>
    <div id="wrap"><h1>some centered text</h1></div>
  </body>
</html>

htmlcss

Answer №1

Within your h1 tag, you have defined the following style:

h1 {
    ...
    transform: translate(-50%, -50%);
    transform: rotate(-45deg);
}

The issue here is that by overriding the initial transform property with the rotate(), you are losing the centering effect achieved by the negative translate(). It's recommended to chain both transformations together like this:

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
}

Additionally, make sure to remove the default margin that is applied to the h1 element (try removing it in the demo to see the impact).

For a visual example, visit: http://codepen.io/anon/pen/jWjxeW?editors=1100

Answer №2

It is recommended to include multiple transform functions one after the other.
A slight modification was made to your CSS, including the addition of text-align: center;

transform: rotate(-45deg) translate(0, -100%);


#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue; 
height: 300px;
width: 300px;
margin:0 auto;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg) translate(0, -100%);
    text-align: center;
}
<html>
  <body>
    <div id="wrap"><h1>some centered text</h1></div>
  </body>
</html>

Answer №3

try out this CSS snippet for rotation and centering: 

transform: translate(-50%, -50%) rotate(-45deg);

#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue; 
height: 300px;
width: 300px;
margin:0 auto;
}

h1 {
    position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<html>
  <body>
    <div id="wrap"><h1>centered text here</h1></div>
  </body>
</html>

Answer №4

To accomplish this, simply nest your h1 within another div

#wrap {
  position: relative;
  transform: rotate(45deg);
  top: 150px;
  background-color: blue;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}
#text {
  position: absolute;
  height: 300px;
  width: 300px;
  transform: translate(-50%, -50%);
  transform: rotate(-45deg);
  background-color: red;
}
h1 {
  text-align: center;
  line-height: 300px;
  margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html */
}
<html>

<body>
  <div id="wrap">
    <div id="text">
      <h1>some centered text</h1>
    </div>
  </div>
</body>

</html>

Answer №5

If you're looking to set a specific height and width for your h1 elements, try using the following CSS code:

h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
    height: 100px;
    line-height: 35px;
    width: 130px;
    margin-top: -50px;
    text-align: center;
    margin-left: -65px;
}

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

display upcoming schedule and time

How can I display the future date and time in the respective field components? See below for a sample code snippet: require([ "dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser" ], function(lang, registry, ready ...

javascriptjqueryhtmldatetimedojo

Tips for displaying a div near the cursor's location when hovering in React JS

Looking for a way to show a hidden div at cursor position when hovering on Text item1 or item2. Check out the sample GIF animation in this Link My attempt using Jquery code inside React resulted in an error: $(".text-item").mouseenter(function ( ...

javascripthtmlreactjshoveronhover

Error: Property 'html' is undefined - AJAX response must be displayed only in a specific div

I encountered an issue: Uncaught TypeError: Cannot read property 'html' of undefined I am working on implementing a voting system for each video on my webpage from a database. I have successfully integrated it using AJAX, but the problem is ...

javascriptphpjqueryhtmlajax

Ways to tackle my code's linked dropdown issue without the use of extensions

When I selected the Id Province, I couldn't select the Id City. How can I fix this issue? Controller code snippet to address this: View code snippet for the same: ...

phphtmljsonyii2

What is the best way to maintain parameters in PHP form code?

I am facing an issue with a script that needs to run with a specific parameter (for example, details.php?studentid=10325). The script contains a form with the following code snippet to send form data back to the current script. However, for some reason, t ...

phphtmlpostparameters

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

"Enhance Your Website with Custom jQuery Preloaders

Currently, I am facing a challenge while developing a website. Specifically, I am struggling with resolving the issue of a blank page being displayed. The website that I am working on involves functionality where swiping right triggers data insertion into ...

javascriptjqueryhtmljquery-mobilepreloader

Navigate to the specified text in the dropdown menu based on the ul li selection

Is it possible to achieve a functionality similar to that of a select box, where typing a keyword that matches an option in the select box will automatically move the pointer to that option? I am looking to implement a similar feature in my HTML code: < ...

javascriptjqueryhtmlcss

What is the method for incorporating more outer space into an inline SVG?

I have a situation where I am using an inline SVG with a transparent fill and a dark stroke. The aim is to change the fill color to dark when hovered over. However, increasing the stroke-width to make the stroke more visible causes it to extend beyond the ...

csssvginline-svg

The hidden visibility feature only activates when the mouse is in motion

visibility: hidden doesn't take effect until the mouse is moved. const link = document.getElementById("link"); link.onclick = (event) => { link.style.visibility = "hidden"; link.style.pointerEvents = "none"; event ...

htmlcss

Placeholder text missing in Internet Explorer 11

There seems to be a problem with the placeholder text not showing up in Internet Explorer 11 when using AngularJS. It displays correctly on all other browsers and I have not made any changes to the CSS that could affect it. I even tried disabling all style ...

angularjshtmlplaceholder

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

htmlangular

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...

javascripthtmltwitter-bootstrap

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property background-image: url("res://ic_more"). It works perfectly on Android, but unfortunately, it does not display on iOS devices. I have confirmed that the image is l ...

cssnativescriptnativescript-angular

Incorporate AJAX functionality with a simple HTML button

Upon clicking the button, the AJAX call fails to execute. Below is the HTML code for the buttons: <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}" class="btn btn-primary update" ...

javascripthtmljqueryajax

Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Can someone help me with this code issue? <!doctype html> <title>Test case</title> <div style="float: left"> <div style="float: left;">Short.</div> <div></div> <div style="overflow: hidden;"&g ...

htmlcssgoogle-chrome

Achieve centered alignment for a website with floated elements while displaying the complete container background color

I am currently working on a website that consists of the basic elements like Container, Header, Content, and Footer. The container has a background-color that should cover the entire content of the site, including the header, content, and footer. However, ...

htmlcsscss-float

Retrieve information from the database and showcase it in a competitive ranking system

Here is the HTML and CSS code for a leaderboard: /* CSS code for the leaderboard */ To display the top 5 in the leaderboard, PHP can be used to fetch data from the database: <?php // PHP code to retrieve data from the database ?> The current ou ...

javascriptphphtmlmysqlcss

Customizing CSS for a Single Container

Recently, I've been tweaking the CSS for the selectMenu UI plugin in jQuery. I have a specific file where all my CSS styles are stored. My goal is to include this file on every page request but restrict its application only to my select menus, not ot ...

cssjquery-ui

Transitioning in CSS involves animating the changing of a CSS property over

My goal with CSS is to create a transition effect with a delay that behaves differently when entering and exiting. Specifically, I want a 1 second delay when an element enters, but no delay (0 seconds) when it exits. transition: width 0.3s ease-in 1s; tra ...

csscss-transitions