Im using transform to center a carrot for a dropdown menu and its working perfectly on every browser except IE
HTML
<div class="row ccu-faq-q-row">
<div class="ccu-faq-question">I’m not crazy about the new name. And I resent all the money --- has spent on naming the ----. How can I register my protest?</div>
<div class="ccu-faq-btn"><img class="faqArrow" src="img/ic-arrow.svg"></div>
</div>
css
.ccu-faqs .ccu-faq-btn img {
left: 50%;
position: relative;
top: 45%;
width: 24px;
-webkit-transform: translate(-50%, -50%);
-moz-box-shadow: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
Related
When I am using this css to make an element center into a container then everything is ok except ie-11. In ie-11 a horizontal scroll apper bottom of the page. When i remove width:100% from this css then scroll remove but i need this width. you can see the problem in this page http://www.azayabeachresortgoa.com/wellness/
.box_center {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
z-index: 100;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-sizing: border-box;
width: 100%;
}
You can actually remove a lot of that stuff and end up with similar positioning, see
If you don't want to revisit that (I suggest you do), you can simply add:
body { overflow-x: hidden; }
Or add an overflow: hidden to one of the .box_center's closer relatives.
I need to place the image inside the div. I know there are img-responsive center-block classes but they resize the given image for some reason. Is there a way to achieve the same goal but without size distortions.
Note: the containing div is a bootstrap column with given classes: hidden-xs col-lg-9 col-md-6 col-sm-6.
Thank you
CSS is my friend
can you try this CSS class
HTML
<img class="centerd-image" src="">
or
<div class="centerd-image">
<img src="">
</div>
CSS
.centerd-image {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Use css for the img class as
width: --%;
margin-left:auto;
margin-right:auto;
<div class="button button-icon topPull">
<div class="button button-icon"><i class="icon ion-android-cart"></i><a class="icon-circle icon-circle-outline">
<i>{{cart.length || 0}}</i>
</a><div> </div>
Now, I want ion-android-cart to be placed near the bottom of the button and anchor link to be at the right top edge of the icon . How do I apply this CSS here?
By default, these appear at the top left corners one after the other.
Use this code-snippet:
.button {
position: relative;
}
.button i {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
The icon will always stay in the absolute middle of the button.
I have been working in a pop up. It's centered vertically and horizontally in the main div. I have used the following code:
CSS
#pop-up {
background-color: #FFF;
display: none;
height: auto;
left: 50%;
margin: 0 auto;
position: fixed;
top: 50%;
width: 420px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
But everytime I hover the DIV, it get pixelated. I have been reading about it and it's a Google Chrome's bug. I have tried different solutions but it didn't help me out. So, can you help me to fix it?
I often use this code to center a div in view:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
It works great on Firefox, Internet Explorer and Chrome, however not in Safari.
What's a workaround to center an image in Safari web browser?
You need another vendor prefixed style.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please refer below to know which browser supports what and what prefix has to be added.
http://caniuse.com/#feat=transforms2d
Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).
The key for safari (including ios devices) is to add the other transform css rules and not just:
transform: translateY(-50%);
You need to add to it this group of rules:
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
Here is some working code of mine:
img.ui-li-thumb {
position: absolute;
left: 1px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
In some cases you'll have to use:
-webkit-transform: translate3d(-50%,-50%,0);
Sometimes works better with mobile browser.
.some-element {
transform: translate(50px 50px) rotate(15deg) scale(1.2);
}
if the above transform doesn't work for you, you can write those out individually as their own properties:
.some-element {
translate: 50px 50px;
rotate: 15deg;
scale: 1.2;
}
reference: https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/