I'm trying to center a heading both vertically and horizontally inside a div that is rotated 45deg (transform:rotate(45deg);).
Because the div is rotated - I rotate the heading the opposite direction (transform:rotate(-45deg);) and then apply regular centering techniques which doesn't work. What is the solution for 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>
In your h1 element you defined this style
h1 {
...
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
you're overriding the first transform property with the rotate() and doing so you're losing the centering effect obtained by the negative translate(): you should chain instead the two transformation like so
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
You should also remove the default margin applied on the h1 element (edit the demo and see what happens without margin: 0;)
Example: http://codepen.io/anon/pen/jWjxeW?editors=1100
You should write one transform function right after another
I made a small change in your css, also added 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>
use this 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>some centered text</h1></div>
</body>
</html>
You can achieve this by encapsulating your h1 in 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>
If you're happy to fix the height/width of your h1 elements, something like this will do it:
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg);
height: 120px;
line-height: 40px;
width: 150px;
margin-top: -60px;
text-align: center;
margin-left: -75px;
}
Related
I'm pretty new to CSS, I wanted to know if it's possible to have some content (an image) on a button on hover. I'll attach an image on how I want it to be. Thank you in advance.
Here's a way to do it:
.btncontain {
position: relative;
width: 200px;
height: 100px;
}
.button {
border: 3px solid aqua;
border-radius: 10%;
width: 100px;
margin: 20px;
padding: 10px;
}
.button:hover{
background-color: aqua;
color: white;
}
.button:before {
content: "Normal";
}
.button:hover:before {
content: "On Hover";
}
.btncenter {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubble {
width: 30px;
display: none;
z-index: -1;
}
.button:hover .bubble{
display: block;
}
.bubbletop{
position: absolute;
top: 25%;
left: 85%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubblebottom{
position: absolute;
top: 75%;
left: 15%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="btncontain">
<div class="btncenter">
<button class="button"> <img class="bubble bubbletop"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024">
<img class="bubble bubblebottom"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024"></button>
</div>
</div>
I do not understand why the border around body is not rendering. I believe it has to do with the child div, #pages, having absolute positioning because when I remove #pages the border reappears. How do I fix this?
html {
width: 100%;
}
body {
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
The border does not disappear. It's there but you have no content in the body so it doesn't have what to 'wrap' inside the border. So it appears only like a 'border-top' but in fact is a 4 sided border without any space inside it's borders :)
I say that body has no content because the only element inside it has postion:absolute so the #page doesn't occupy any content.
THere are a few ways to fix this. You can add a height to body of 100vh ( 100% viewport height ). And you will have no problems.
body {
background-color: green;
width: 100%;
margin: 0;
border-style: solid;
box-sizing:border-box;
height:100vh;
}
#pages {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
try to add 100% to html and body tag
html, body { height: 100%}
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
I have placed 3 div. First parent having css like position relative and it is taking full width of viewport. 2nd children is having absolute position to cover all area of parent. The 3rd children is also having absolute position with margin: 0 auto.
.slide-block {
position: relative;
}
.slide-block .slide-block-center-wrapper {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
max-width: 1180px;
margin: 0 auto;
padding: 0 30px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
left: 0;
right: 0;
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
The problem is, .slide-block-content is not appearing in center in IE browser. It is appearing in center in chrome and mozilla.
You can try to solve it like below. For the element to be vertically centered the height needs to be known. I also changed the 3rd child to inline block and used the transform to horizontally center it. If you only need to vertically center it, you can remove the left: 50% and change the translate to translateY.
.slide-block {
position: relative;
width: 100%;
height: 200px;
background: deepskyblue;
}
.slide-block .slide-block-center-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
display: inline-block;
max-width: 1180px;
padding: 0 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
-moz-transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
*{
margin: 0px; /* Added */
padding: 0px; /* Added */
}
.slide-block {
align-items: center; /* Added */
}
.slide-block .slide-block-center-wrapper {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
max-width: 1180px;
margin: 0px;
padding:0px;
position: absolute;
top: 50%;
left:50%; /* Added */
transform: translate(0,-50%);
-moz-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
Try by adding justify-content: center to your .slide-block .slide-block-content. Hope this will work.
.slide-block .slide-block-content {
justify-content: center
}
http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color
I have some text which could be different on different pages. I need to make it align vertically middle. There is some problem because of less width for text.
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
transform: translateY(-50%);
transform: rotate(-90deg);
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
It should look like the image attached below:
I added right: 50%, transform-origin: right and removed transform: translateY()
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
background-image: linear-gradient(darkgrey 0%, darkgrey 50%, lightgrey 50%);
background-repeat: no-repeat;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
right: 50%; /* 1 */
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
/*transform: translateY(-50%);*/ /* 2 */
transform: rotate(-90deg);
transform-origin: right; /* 3 */
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
i made a small change to the DOM and was able to achieve it,i.e centering the text , irrespective of its length .
Made a small change to the DOM .
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Added an extra wrapper , hope it is allowed.
.vertical-text-wrap {
position: absolute;
height: 100%;
margin: 0px 20px;
}
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: inline-block;
position: relative;
top: 50%;
left: -35%;
font-size: 10px;
text-transform: uppercase;
transform-origin: 50% 50%;
transform: translateY(50%) rotate(-90deg);
}
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Catch here is , when text becomes shorter , the left position of span.vertical-text has to be adjusted.
But hey , it is vertically centered :)
I think you can also do it this way http://codepen.io/Danstan/pen/QGWggO
Just add the translateX and translateY correctly on .vertical-text everything will be at the center
.vertical-text {
font-size:8px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
transform: translateX(-50%) translateY(-50%) rotate(90deg); white-space: nowrap;font-size: 10px;}