HTML
<div class="image-container">
<img class="image" src="image.png">
</div>
CSS
.image-container {
width: 95px;
height: 95px;
background: #000000;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.image {
max-width: 95px;
max-height: 95px;
}
This works fine on Chrome and Safari but not in Firefox. It's filling up the whole div and aspect ratio is not maintained. How to make this work on Firefox?
Chrome / Safari
Firefox
Because of your .image height stretch the image. Change your css like this.
.image {
width:100%;
}
.image {
max-width: 95px;
}
or
.image {
width: 100%;
}
.image{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
In order to make it cross-browser you can use the following approach: Check working JsFiddle demo here
Only CSS required:
.image-container {
width: 95px;
height: 95px;
background: #000000;
display: table-cell;
vertical-align: middle;
}
.image {
width: 100%;
}
Related
I have a simple css styling question. I've been trying to create this effect on a background to match a design but i just can't seem to get it right.
Here is what I have
And here is the design
does anyone have any tips to help me create that background effect? any help would be appreciated.
My code right now, if it helps:
.backgroundOverlay {
background-image: url('../images/background-pattern.png'), linear-
gradient(to bottom right, rgba(0,118,255,0.8), rgba(0,197,255,0.8));
/* opacity: 0.3; */
height: 100vh;
width: 100vw;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* padding: 15vw 5vw; */
}
The background image is just a repeated .png file
Thank you in advance
Use this:
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
position: relative;
}
.container .content{
position: absolute;
z-index:999;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:99;
background-image: url("path/to/yourfile.png");
background-size: repeat;
opacity: 0.4;
}
<div class="container">
<div class="content">
<img src="path/to/your/upper_frame.png" />
</div>
</div>
Following code works as expected (block is centered) in Chrome and Firefox but in Safari child container is slightly off:
#container {
width: 100%;
background: yellow;
height: 20px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
#content {
padding: 0px;
background: linen;
position: fixed;
}
My question would be - how to center "position: fixed" element in a "display: flexbox" parent in Safari?
Element with position: fixed (or position: absolute) won't behave in the same way in Safari as they do in Chrome/Firefox.
To center a flex item in Safari you need to use transform: translate
Updated codepen
Stack snippet
#container {
width: 100%;
background: yellow;
height: 20px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
#content {
padding: 0px;
background: linen;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<div id="container">
<div id="content">THIS CONTENT IS NOT CENTERED IN SAFARI</div>
</div>
I am trying to put my things in the tag at the center of the screen, but it is not working.
How can I put it in center of screen using HTML and CSS?
Where I am -
Code-
Result -
Assuming you have a .child element you want to center inside a .parent element, You have 2 options:
1) Flexbox - You can use the following css:
.parent {
display: flex;
flex-direction:
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
.child {
flex: 0 1 auto;
align-self: auto;
text-align: center; /*optional*/
}
2) Absolute positioning:
.parent {
position:relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center; /*optional*/
}
It would be much easier if you provided some code you have written, but if you want to center a tag you can do this:
CSS:
#parentTag{
position: relative;
}
#myTagIWantToBeCentered{
position: absoulte;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div id="parentTag">
<div id="myTagIWantToBeCentered">
<!--stuff here-->
</div>
</div>
If you need to center content horizontally and vertically use this:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box_text {
color: #ffffff;
font-size: 20px;
font-weight: bold;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin:3px;
position: relative;
}
<div class="box"><span class="box_text">0</span></div>
If you are running on Bootstrap, you can easily add a class text-center. Normally, an (inline)-block element can be centered with css
.center { margin: 0 auto; }
It would be best if you could provide your code so we can suggest base on it.
You can try using CSS Flexbox. If you add
.class {
display: flex;
align-items: center; //Aligns the content vertically
justify-content: center; //Aligns the content horizontally
}
to the parent html element.
For an example, have a look at this js-fiddle https://jsfiddle.net/adamturner93/brjotz2y/1/.
You can try using HTML Tag if you are not using HTML5.
Ex-
<center>This text will be center-aligned.</center>
If you are using HTML5 then you need to use css to modify.
<element>.<class> {
margin-left: auto;
margin-right: auto;
width: 6em
}
I have implemented the Angular 2 progress spinner from the below link
https://github.com/angular/material2/tree/master/src/lib/progress-spinner
I would like to have it centered, however, the only way I can seem to get it to work is to remove the
display: block
from the CSS. However, this causes the spinner to appear huge on the page.
Any advice would be great.
just add margin rule:
<md-progress-spinner style="margin:0 auto;"
mode="indeterminate"></md-progress-spinner>
plunker: http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview
UPDATE
Just wanted to share and demonstrate 6 other general centering solutions
FLEX:
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
GRID:
.center {
display: grid;
place-items: center;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
LINE HEIGHT + TEXT ALIGN (will not work as desired for multiple lines, use white-space: nowrap; to ensure one line)
.center {
line-height: calc(100vh - 20px);
text-align: center;
}
/* +++++++ STYLES +++++++ */
.wrapper {
background: red;
white-space: nowrap;
}
.inner {
background: green;
color: white;
padding: 12px;
display: inline;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
USING ABSOLUTE, TOP, LEFT and TRANSFORM TRANSLATE
.center.wrapper {
position: relative;
}
.center .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
USING ABSOLUTE, TOP, LEFT, BOTTOM, RIGHT and MARGIN AUTO (mentioned by György Balássy). Note: inner div width needs to be set.
.center.wrapper {
position: relative;
}
.center .inner {
position: absolute;
inset: 0;
margin: auto;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
height: max-content;
width: max-content;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
Using TABLE
.center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
width: calc(100vw - 20px);;
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
display: inline-block;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
This CodePen helped me to create a page-centered spinner with Material Design in Angular 4: https://codepen.io/MattIn4D/pen/LiKFC
Component.html:
<div class="loading-indicator">
<mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
</div>
Component.css:
/* Absolute Center Spinner */
.loading-indicator {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading-indicator:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
The first answer doesn't work unless height is set in a parent element.
I fixed it using fxFlex
<div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
<mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
</div>
I am using angular 6 with material 2+ and used that CSS code:
.mat-spinner {
position: relative;
margin-left: 50%;
margin-right: 50%;
}
Source: Angular Wiki
For me, this worked the best:
Component:
<div class="center">
<mat-spinner> </mat-spinner>
</div>
Scss:
/** Can be used to center any element */
.center {
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
you can use with grid as well :
.wrapper {
display: grid;
place-content: center;
height: calc(100vh - 20px);
background: red;
}
I'm using parent containers to vertically center a div.
http://danacoleproducer.com
It works in Safari and Chrome but not Firefox. I looked at this post: CSS vertical-align: middle not working but I'd rather not use tables.
My CSS:
.wrapper {
height: 100%;
max-width: 420px;
}
.wrapper:before,
.container {
display: inline-block;
vertical-align: middle;
}
.wrapper:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
margin-left: -0.25em;
}
.container {
text-align: justify;
font-size: 12px;
}
The following might do the trick ;-)
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Where .container is what you want to center vertically.