I have a button that is in the exact center of is container:
.menu-heading{
transition: top $speed;
cursor: pointer;
display: block;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
when is parent get the is-expanded class, the button moves to the top left of the page:
.is-expanded &{
top:0;
left: 0;
transform: scale(.5);
cursor: default;
z-index: 9999;
}
Now I would be able to recreate this behaviour with transform translate property, instead using positioning, but I'm not sure if it is doable, with top:0 and left:0 I get the same result on all kind of resolution, with transofrm translate not.
this is the container with class is-expanded.
.section.is-expanded{
position:absolute;
width:100%;
height:100%;
z-index:1000;
left:0;
top:0;
oveflow:hidden
}
Related
Can any one tell me why owl slider's navigation buttons flickering when hovered?
These are the '+' plus sign images.
http://kmg.makingconnection.co.uk/
Thankyou 'dingo_d'. By doing left:0 & right:0 along with position: absolute solved my problem.
Your buttons have opacity over them at 0.5, and when you hover there is a change in the opacity to 1
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
filter: Alpha(Opacity=100);
opacity: 1;
text-decoration: none;
}
Because you are using background as a plus sign, every time you are hovering over it you apparently trigger that change that results in a flicker. It's better to use pseudoelements for this (even though when you turn the opacity down you can see a bit of overlap)
#owl-demo .owl-prev{
float: left;
margin-left: 65px;
font-size: 0;
width: 32px;
height: 31px;
position:relative;
background:transparent;
}
#owl-demo .owl-prev:before,
#owl-demo .owl-prev:after{
content:"";
position:absolute;
top:0;
left:50%;
margin-left:-4px;
width:8px;
height:32px;
border-radius:3px;
background: #ED1B34;
opacity:0.5;
}
#owl-demo .owl-prev:after{
transform: rotate(90deg);
}
#owl-demo .owl-prev:hover:before,
#owl-demo .owl-prev:hover:after{
opacity:1;
}
Here is example demo of my problem
http://www.bootply.com/tkrs6G3GlG
Basicly, I've got on the left form groups, and in each I've got large text giving some information and then asking user to select something (in example is only radio, but there are dropdown's and checkboxes as well). I would like that for every form group, options on the right are vertically align (in the middle) depending on text size. In example above, radio's are on top, but I would like them in the middle of corresponding form-group.
I've tried
.vcenter{vertical-align:middle;
}
but it's not working. I've also tried setting height of div which contains options
.maxHeight{
height:100%;
}
but div is not getting larger. I tried using large height and hide overflow, but not working.
Only thing that worked so far is using
.vcenter{
position:absolute;
vertical-align: middle;
}
but it only looks well on large screen, but after screen resizing, it's overlaping with text.
If your div is inside another div,try
#my_div{
margin-left: auto;
margin-right: auto;
width: /*put_your_width*/;
}
And if it is the parent div
#my_div{
display: table;
margin-right: auto;
margin-left: auto;
}
There are a few ways to do this. I usually use this method...
HTML
<div> <p>Center this text</p> </div>
CSS
div{
position: relative;
height: 500px;
width: 500px;
background: green;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
p{
position: absolute;
top:50%;
text-align:center;
display:inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
The way I prefer to do it is add margin: auto; and top, left, right, and bottom 0 like so:
.parent {
position: relative;
}
.child {
margin: auto;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
you can use many aproaches.
first one is with position
.parent_div{
position:relative;
width:500px;
height:500px;
}
.children_div{
position:absolute;
width:100px;
height:100px;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}
-But you need to have specified the height and width of the child element.. so it is not good for fluid design.
Sec. aproach is the best i think it uses display :)
.parent_div{
display:table;
width:500px;
height:500px;
text-align:center;
}
.children_div{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
}
.children_children_div{
/*What ever... this div will be centered verticaly*/
}
So I'm trying to get an element to align itself a certain percentage from the CENTER of the page.
So I've tried replacing where I'd usually put a percentage from either the left or the right with "center"
.aboutcredit {
z-index:-100000;
center:25%;
top:75%;
transform:translateY(-50%) translateX(-50%);
position:fixed;
text-align:center;
vertical-align:middle;
}
but no luck. Kind of what I'm trying to do here:
I don't know if you have noticed, but center:25%; does nothing. You probably want left:50%. Seeing as you want it to be moved 25%, make it left:75%; and that should be what you're looking for. Like so:
.aboutcredit {
width: 50px;
height: 50px;
background-color: black;
z-index: 1;
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%);
text-align: center;
vertical-align: middle;
}
<div class="aboutcredit"></div>
I've run into this several times, and the way I do it is to:
1. Set the element to position absolute
2. set the element using percentages to the area where you would like it, to center on page it would be left:50%, margin-left: -{width / 2}, but in this case it is left:75%, margin-left: -{width / 2}
.box {
height:400px;
width:400px;
border:1px solid black;
left: 75%;
margin-left:-200px;
position: absolute;
}
http://plnkr.co/edit/7j8DxiUUASrn8wQqBKNW?p=preview
.aboutcredit {
z-index:-100000;
left:50%;
top:50%;
transform:translateY(-50%) translateX(-50%);
position:fixed;
text-align:center;
vertical-align:middle;
}
http://jsfiddle.net/gerLkswu/1/
Im trying to figure out how to make shopping cart tab that would be positioned on the right corner and also rotated 90 degrees. The rotation naturally mixes the position but maybe there's a workaround of wrapping to different wrappers etc....
Extra points if there wouldn't need to define width. I don't care about older browsers
How about using transform-origin? See DEMO.
Relevant CSS:
#box {
position: relative;
}
.bg {
right: 40px; /* same as height */
height: 40px;
transform: rotate(-90deg);
transform-origin: 100% 0;
position: absolute;
line-height: 40px; /* same as height, for vertical centering */
}
Ana's answer is excellent and pointed me in the right direction, but I realised you could achieve the same effect without having to explicitly set the height, line-height and position for the element you want to move - instead, just set translate(0, -100%):
body {
margin: 0;
}
#box {
position: relative;
}
.bg {
right: 0;
padding: 1em;
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 100% 0;
position: absolute;
background: #FF1493;
}
<div id="box">
<div class="bg">
<div class="txt">He's not the Messiah. He's a very naughty boy.</div>
</div>
</div>
...and a jsFiddle for good measure.
To rotate text at 90° using CSS, consider using writing-mode.
Set position: relative; on the parent div, then use something like this on the rotated element:
#rot {
position: absolute; /* only handy here because its parent is set to `position: relative;` */
left: 0;
top: 0px;
/* writing-mode: sideways-lr; /* Webkit browsers don't support `sideways-lr` yet */
writing-mode: vertical-rl; /* `vertical-rl` and a rotation will achieve the same effect */
transform: scaleX(-1) scaleY(-1);
height: 100%;
background: rgba(0, 0, 0, 0.1);
text-align: center;
line-height: 2.85;
color: white;
font-weight: bold;
}
You'll end up with a div stacked on the side of your parent div, with the text at a 90° angle.
This way you don't have to think about the rotation origin.
If you need to position wrapper div.and rotate child div so that its always centered vertically and horizontally, try something like this!
.togglewrap{
position:relative;
float:left;left:20%;top:0;
width:30px;
height:120px;
background-color: #ffde21;
}
.sbartoggle {
background:#f5f5f5;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100%;
height:30px;/*equal to parent width*/
line-height:30px;/*center text*/
transform: rotate(-90deg);
background-size:10px 10px;
}
I'm wondering how to achieve a diagonal overlay/mask such as the image below:
This can be done by using a regular image that contains the mask, giving it a high z-index, and absolutely positioning it on top of the other image:
.bottom-mask {
position:absolute;
left:0;
bottom:0;
height:45px;
width:100%;
z-index:400;
background:url(../images/bottom-mask.png) no-repeat 50% 0
}
I have since learned that there are multiple ways to achieve this effect both using SVG, CSS and image background overlays. I decided to go with a pseudo element and using the transform property.
https://codepen.io/mattsince87/pen/VExQGm
.box:after {
content: "";
display: block;
position: absolute;
top: 150px;
width: 600px;
height: 600px;
background: #fff;
transform: rotate(-15deg);
transform-origin: center center;
left: -100px;
}