<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.
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.
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%); }
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;
I've got an image which will scale on hover. However, at the same time the image get's translated to -50% on both the X and Y axis, or in some cases, only on the X axis.
Is there a way to inherit the previous transform while still changing one of the values?
.container {
position: relative;
height: 400px;
width: 640px;
overflow: hidden;
}
img {
-webkit-transform: translate(-50%,-50%) scale(1);
transform: translate(-50%,-50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
transition: 500ms;
}
img.special {
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
top: 0;
}
img:hover {
-webkit-transform: translate(-50%, -50%) scale(1.1);
transform: translate(-50%, -50%) scale(1.1);
}
<div class="container">
<img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
<div class="container">
<img src="http://www.lorempixel.com/640/400/abstract" class="special" alt="test image" />
</div>
TL:DR;
Is there a way to inherit the original transform settings, while still changing one of the values?
I'm not looking for answers adding extra css, classes or whatever. I'm just looking for a way to keep this as short as possible. I've already solved this using extra classes and CSS.
Is there a way to inherit the original transform settings, while still changing one of the values?
No, there is no way to do this in CSS. CSS transform property declarations (like all other properties) are not additive. The latest setting (or) the one which is more specific will completely override anything else specified and hence there is no chance to inherit some values and add on top of it.
The only alternative with pure CSS is to add an extra wrapper and apply one of the transforms to it. In this way, the img:hover styling (the scale) need not be repeated and can be left as common for all.
.container {
position: relative;
height: 400px;
width: 640px;
overflow: hidden;
}
.wrapper {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.special.wrapper {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 0;
}
.wrapper img {
transition: 500ms;
}
img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="container">
<div class="wrapper">
<img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
</div>
<div class="container">
<div class="wrapper special">
<img src="http://www.lorempixel.com/640/400/people" alt="test image" />
</div>
</div>
The other way would be to use JavaScript, find out what is the current transform on the element, then append the extra transform on hover and apply it via inline styles.
I've used the following css to centre a div on screen (no fixed width or height so can't use defined pixel width and height and negative margins).
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I've just realised that when you have saved your details for a form in Firefox, and then try to fill in the form within my div, the pop-up Firefox creates that contains your saved details is ignoring the transform, and appearing in the location on screen where the entire div would be if transform: translate wasn't applied.
It's difficult to give an example of this because it requires you to have saved your login details to a site, but if you go to a site where you have saved details, and move the container using transform: translate, you'll see the effect.
Is there a way of forcing Firefox's pop-up to take on the transform? Or will I need to find a different way of centring my div onscreen?
Your CSS should be right, but the position should be fixed on your parent div
w3schools: position: absolute The element is positioned relative to its first positioned (not static) ancestor element
.parent{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
What kind of browser support do you need? you can solve this with flexbox!
body (or container-div) {
display: flex;
align-items: center;
justify-content: center;
}
Try this to center div on a page. It is a more elegant approach.
.center{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
height:some-height;
width:some-width;
}