I know there are few way to positon a div center vertically and horizontal using css. But for old phone support, I have to do it with js.
http://jsfiddle.net/ncsy9khf/1/
div{
width:50px;
height:50px;
background:orange;
position:relative;
margin: 0 auto;
display:block;
}
How do I do the calculation to know what value of my margin top to make the box center center?
This is my favorite way:
position:relative;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
This 5 lines can vertically and horizontally almost anything
Fiddle
I learned this method from this article
Support tables here
You can expect 95% of your users have this work perfectly
More browser friendly way:
position:relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
Friendly Fiddle
Just use plain CSS:
.parent {
position: relative;
width: 160px;
height: 160px;
background: #eee;
}
.centered {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF9800;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="parent">
<div class="centered"></div>
</div>
The parent element must have position:relative; (In which you are planning to center the div)
Also there's no need to add display:block; to div elements - they are block elements by default
Related
I need a popup window to be centered in the browser window regardless of where the page is scrolled to. The window function is with jquery. This works in Safari but not in other browsers:
#infoBox1, #infoBox2, #infoBox3, #infoBox4 {
position: fixed;
display: none;
width: 70%;
height: auto;
top: 30%;
left: 50%;
margin: -15% -35% 0 -35%;
z-index: 400;
}
Any suggestions would be appreciated.
You can center the element using :
.div {
position:absolute; // or use fixed;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Try This,
Hope this help
#infoBox1, #infoBox2, #infoBox3, #infoBox4 {
position: fixed;
display: none;
width: 70%;
height: auto;
top: 50%;
left: 50%;
z-index: 400;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
this should do the trick:
#infoBox1, #infoBox2, #infoBox3, #infoBox4 {
position: fixed;
display: none;
width: 70%;
height: auto;
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index: 400;
}
transform:translate(-50%, -50%) will make sure the left 50% and top 50% will be taken from the inside of the selected div, not just the outside making it more to the left/top then you expect it to be.
i tried different ways, but i can't find any way to do something like this through HTML, CSS.
At the moment I have:
HTML:
<div id="intro-slogan">
<div id="diagonal"></div>
</div>
CSS:
#intro-slogan{
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
}
#diagonal{
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
}
I want something like this:
fiddle: https://jsfiddle.net/avakqez9/1/
<div class="one">
<h1>The Jocky</h1>
</div>
<div class="two">
<h1>of Mocky</h1>
</div>
CSS
div{
vertical-align: middle;
display: inline-block;
}
.one{
overflow: hidden;
margin-top: -1px;
transform: rotate(10deg);
border-right: 1px solid #000;
}
.one h1 {
margin-right: -20px;
transform: rotate(-10deg);
}
.two h1{
color: orange;
margin: 40px 0 0 -10px;
}
You could try wrapping each one of the original divs in a container, skewing the containers with the transform CSS3 property (check skewX and skewY) and skew the content div in the opposite direction (this way you keep the content non-skewed).
After that, perhaps overflow:hidden and some toying around with margins/paddings could finally do the trick.
Try using position:absolute , z-Index , border properties , using span element as descendant of #intro-slogan to position text "of giving" below text "the gift"
#intro-slogan {
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
z-Index:0;
font-size:24px;
}
#intro-slogan span {
position:absolute;
top:145px;
left:74px;
}
#diagonal {
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
position:absolute;
left:-140px;
z-Index:10;
border:2px solid #fff;
}
<div id="intro-slogan">
The gift<div id="diagonal"></div><span>of giving</span>
</div>
For those who still need, i made it this way:
HTML:
<div class='centerMe'>
<div class='skew1'>
<div class='text part-1'>
<span>the Gift</span>
</div>
</div>
<div class='skew2'>
<div class='text part-2'>
<span>of Giving</span>
</div>
</div>
</div>
CSS:
.skew1,
.skew2{
overflow: hidden;
height: 300px;
cursor: pointer;
position: relative;
width: 27em;
float: left;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
.text{
top: 50%;
color: #fff;
right: 60px;
font-size: 2em;
position: absolute;
display: inline-block;
transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.skew2:before{
content:'';
top: 55%;
left: 0px;
width: 2px;
height: 100px;
position: absolute;
background-color: #fff;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.centerMe{
top: 50%;
left: 50%;
min-width: 1200px;
position: absolute;
transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
This question already has an answer here:
Fill image in a div from center
(1 answer)
Closed 7 years ago.
Color must start from center point and with transition time. I have used all css transitions but no one gave me effect which i want.
Its not a duplicate because i want with css only.
You can do this with a pseudo-element and transition the scale.
div {
width: 200px;
height: 200px;
border: 1px solid grey;
margin: 25px auto;
position: relative;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 150%;
height: 150%;
background: #f00;
transition: transform 1s ease;
border-radius: 50%;
}
div:hover:before {
transform: translate(-50%, -50%) scale(1);
}
<div></div>
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I am trying to achieve this effect using HTML/CSS:
What I have until now is this
http://jsfiddle.net/zxq91ok0/
.wrap {
position: relative;
overflow: hidden;
width: 100%;
height:250px;
margin: 0 auto;
background-color:#B2C2CC;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
The problem I face is that instead of plain background color I have another image as a background so I can't figure out how to get rid of the light blue background.
Can you help me accomplish the effect shown on the first image?
Thanks!
I think you can't add a triangle in your shape and use it as a mask like that. You need to use SVG shapes and masks or the CSS mask-image property (example - beware that's not supported by all browsers).
I want make a menu like the image but I don't know how to cut the two divs and make it clickable.
I have tried with svg and borders on divs but I can't get the divs nor svg together because the "outline" still a rectangle!
the image example its on this link:
http://postimg.org/image/ffp6g83fd/537cb837/
I only can make this :
********| *****
******* | ******
****** | *******
***** |********
and I want :
******** *****
******* ******
****** *******
***** ********
and make them clickable
this was my result based on Hugo Marabutt Nogueira answer
http://jsfiddle.net/L7PL4/
Here's one way to do it without too much extra cruft. This uses borders and some css transforms to make the angles.
JSFiddle
CSS
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 50px;
}
.left,
.right {
float: left;
}
.left span,
.right span {
position: absolute;
line-height: 50px; // equal to height of element
}
.left {
width: 25%; // change as needed
border-bottom: 50px solid blue;
border-right: 50px solid transparent;
-webkit-transform: rotateX(180deg);
}
.left span {
width: 100%;
text-align: center;
-webkit-transform: rotateX(-180deg); // opposite of skew
}
.right {
width: 25%;
border-bottom: 50px solid green;
border-right: 50px solid transparent;
-webkit-transform: rotate(180deg) rotateX(180deg);
}
.right span {
width: 100%;
text-align: center;
-webkit-transform: rotate(-180deg) rotateX(-180deg);
}
Just make sure to unskew the text by using the opposite transforms on them. You'll also have to use all the appropriate vendor prefixing for transforms.
You can use CSS3 Transitions to achieve that shape and then bind a js click to them.
Like this :
http://cdpn.io/stHdg
.skew{
background-color: #333;
width:150px;
height:75px;
float:left;
position:relative;
margin-left:100px;
margin-top:50px;
cursor:pointer;
}
.a:before{
content:"";
position:absolute;
background: #333;
top:0;
left:-25px;
bottom: 0;
width: 50px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
}
.b:after{
content:"";
position:absolute;
background: #333;
top:0;
right:-25px;
bottom: 0;
width: 50px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
}
You can use a negative margin to make the element overlap. Example:
margin-right: -5px;