What is the best way to center the rotated text (270deg) in current situation? It is currently position relatively but it isn't a very good solution.
HTML:
<div id="side" class="container">
<p id="sidetext" >Work</p>
</div>
<div id="cont" class="container">
<div id="row" class="row">
Hey yeah!
</div>
</div
And CSS:
#sidetext {
font-family: "Josefin Sans";
text-transform: uppercase;
display: block;
font-weight: 100;
font-size: 1.7em;
color: white;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
transform: rotate(270deg);
position: relative;
top: 216px;
margin: 0 22px 10px;
}
you can try this css.
.tab-caption {
position: absolute;
top: 50%;
height: 2px; /* actual text will overlap! */
margin-top: -1px; /* subtract half the height */
line-height: 0px; /* centre the text on the base line */
text-align: center;
left: 50%; /* added */
transform: translateX(-50%) rotate(90deg); /* added translateX */
white-space: nowrap;
}
Related
I've been trying to solve a sideways header problem. I intend on creating a globally sideways header like so on a website: sideways header
However, my problem arises trying to separate the type (it's also breaking on 2 lines). I can't seem to make the vertical line contained or centered within the rectangle . When I resize my browser window it does not stay contained within the rectangle box. I would GREATLY appreciate any suggestions and advice!
What I have so far:
.box {
height: 1326px;
width: 112px;
background-color: transparent;
border: 1px solid #f9f0e4;
}
.bottom {
text-align: center;
color: #000000;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.top {
text-align: center;
color: #000000;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.vl {
border-left: 1px solid #f9f0e4;
height: 620px;
position: absolute;
left: 50%;
top: 0;
}
<div class="container">
<div class="box">
<p class="bottom">CREATIVE STUDIO</p>
<div class="vl">
<p class="top">FLORENCE — ITALY</p>
</div>
</div>
</div>
You can instead consider rotation on the whole box and use vh unit so the width is relative to height since it's getting rotated :
.box {
background-color: transparent;
width: 80vh;
border: 1px solid;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: center;
}
.box {
display: flex;
justify-content: space-between;
text-align: center;
color: #000000;
}
.bottom {
text-align: center;
color: #000000;
margin-left: 10px;
}
.top {
text-align: center;
color: #000000;
margin-right: 10px;
}
<div class="box">
<p class="bottom">CREATIVE STUDIO</p>
<p class="top">FLORENCE — ITALY</p>
</div>
How to write vertically from bottom to up with HTML and CSS? I have tried many things writing-mod:tb-rl; but the issue not yet solved.
Create a div with class rotate
<div class="rotate"> Hello World </div>
Then define the CSS class
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Hope this is what you are looking for.
try using transforms.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotate {
/* make width fit content */
display: inline-block;
/* rotate 90 degrees counterclockwise */
/* and move down on 100% of its height */
/* (actually width, but when rotated it looks like height) */
transform: rotate(-90deg) translateX(-100%);
/* perform this transformation relatively to the top left corner of block */
transform-origin: top left;
/* styles for demo */
padding: 10px;
background-color: red;
color: #fff;
text-transform: uppercase;
}
<div class="rotate">Profile</div>
But beware that transformed element takes its position the same if it wouldn't be transformed. So in case you'd have some siblings with text it will be overlapping them. Demo:
.rotate {
display: inline-block;
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
/* just styles for current demo */
padding: 10px;
background-color: red;
color: #fff;
text-transform: uppercase;
}
<div class="container">
<div class="rotate">Profile</div>
<div>Some other text</div>
<div>Some other text</div>
<div>Some other text</div>
</div>
In this case you can apply absolute positioning to this element. Demo:
.container {
/* make absolute positioning relative to container */
position: relative;
/* some offset for its not rotated text */
/* need to be equal rotated element height + offset from rotated element */
padding-left: 45px;
}
.rotate {
display: inline-block;
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
/* apply absolute positioning */
position: absolute;
/* move element to the left */
left: 0;
/* just styles for demo */
padding: 10px;
background-color: red;
color: #fff;
text-transform: uppercase;
}
<div class="container">
<div class="rotate">Profile</div>
<div>Some other text</div>
<div>Some other text</div>
<div>Some other text</div>
</div>
How do you vertically rotate text on IE8+
The elements I want to vertically rotate are positioned absolutely and require to be in the same place.
<div id="parent">
<div id="child_1">
</div>
<div id="child_2">
</div>
</div>
CSS:
#parent {
position: absolute;
width: 300px;
height: 300px;
}
#child_1 {
postion: absolute;
top: 250px;
left: 50px;
width: 100px;
height: 10px;
}
#child_2 {
postion: absolute;
top: 200px;
left: 10px;
width: 100px;
height: 10px;
}
There is a hack for IE8 using filter however this requires positioning of element for IE separately but I can live with this.
IE8:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
IE9+:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
I want to align a text vertically(That is 270 degree) and in the vertical middle of an image. This is what i actually want
I tried with CSS 'transform' property but its not working for me. Here i tried the code . And the HTML and CSS code i tried is
HTML :
<div id="img-container">
<label id="lblConfidence">Confidence</label>
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
CSS :
#img-container{
margin: 0 auto;
padding:0;
}
#image{
border:5px solid red;
margin-left:50px;
width:10px;
height:100px;
}
#lblConfidence{
vertical-align:middle;
transform:rotate(270deg) ;
-ms-transform:rotate(270deg) ; /* IE 9 */
-transform:rotate(270deg) ; /* Opera, Chrome, and Safari */
}
#lblLow{
margin-left:48px;
}
#lblHigh{
margin-left:48px;
}
Here's a solution that relies on pseudo-elements and thus uses minimal markup: http://jsfiddle.net/C49q7/1/. A particular emphasis has been placed on the alignment of elements. The #image element can be moved anywhere. The labels follow it precisely.
HTML:
<div id="image"><span></span></div>
CSS:
#image {
border:5px solid red;
width:100px;
height:20px;
text-align: center;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: 100px;
}
#image:before {
content: "Conidence";
position: absolute;
top: -24px;
left: 0;
right: 0;
text-align: center;
}
#image > span:before {
content: "High";
position: absolute;
right: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
#image > span:after {
content: "Low";
position: absolute;
left: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
add css to container.
#img-container {
position: relative;
}
add css to label.
#lblConfidence {
position: absolute;
top: 50%; -moz-transform:
rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
Here only given a style for align the label 50%. But it is depending on the length of the label. if this label is dynamic, please use a javascript to set the " top: 50%" style. and change the value relatively to the length of label.
Please replace lable with div and use below CSS for lblConfidence :
#lblConfidence
{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
writing-mode: tb-rl; /* IE 8 */
filter: flipv fliph; /* IE 8 */
margin-top: 100px;
width: 200px;
text-align: center;
height: 50px;
background:#ccc;
}
you can refer this solution : http://jsbin.com/joqofu/3
<div class="container">
<div class="left"><label>Confidence</label></div>
<div class="right">
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
</div>
and css
.container{
position:relative;
}
#image{
border:5px solid red;
width:10px;
height:100px;
}
.left {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display:block;
height:120px;
width:100px;
text-align:left;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.right{
margin-left:10px;
float:left;
text-align:left;
}
demo
Demo html
<div class="controller">
<div>Special Offer</div>
</div>
Demo css
.controller{
width: 55px;
height: 216px;
background: #000;
border-radius: 0 19px 19px 0;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.controller div{
transform: rotate(90deg);
}
I could use white-space: nowrap; to .controller div it will increase the width of that controller and if I have long text this will have in one line. But I want this multiline but fully heighty as this.
Ok,what about THIS
.controller{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 55px ! important;
height: 215px;
background: #000;
border-radius: 0 19px 19px 0;
text-align: center;
vertical-align: middle;
display: block;
float:left;
position:relative;
margin-right: 10px;
}
.controller div{
position: relative;
top: 90px;
left: -70px;
width: 190px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}