CSS to enable vertical alignment and responsiveness

Question

The code below is horizontally responsive by default. However, it’s not vertically responsive. Is there any CSS element one could use to enable vertical responsiveness?

ScreenClip

I tried the elements below.

vertical-align: middle
align-content: center
align-items: center
align-self: center
resize: vertical; justify-content: center;

But they didn't work.

user_16496357 · Answer

I sort of re-worked your HTML a bit. I would nest all svg's in a wrapper and flex that wrapper. Then you can nest each svg individually in divs. For this example, I called them row-contain I flexed that div also.

The thing is with vertical responsiveness is you have fixed widths on your img and svg so if you load them into your site with the correct width and height you desire and then keep this same flex layout they should resize automatically vertically. For example, you can use sample media queries. to resize the elements for different heights. You can see my sample on I added to your CSS for the large circle. Please see the changes below.

body {
  height: 100vh;
  background-color: black;
  color: white;
  text-align: center;
}

/* Parent to row-contain, nesting all SVG's */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row-contain {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* SVG fixed-height → standard device height */
 svg {
    width: 100px;
    height: 100px;
}
 img.centered-and-cropped {
    width: 300px;
    height: 300px;
    border: 1px solid currentColor;
    border-radius: 50%;

}


/* Media queries for circles */
@media only screen and (max-height: 750px) {
  img.centered-and-cropped { /* big circle resize */
    height: 150px;
    width: 150px;
  }
  
  svg { /* Fill's in for SVG for media */
    outline: solid 1px white;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-left: 10px;
  }
  
  use { /* display: none; on `use` to get rid of main SVG → vertical responsiveness kicks in */
    display: none;
  }
}

/* try removing the last media query and see that when the initial SVG resizes 
it gets clipped. TBH, I don't work with SVG's much but I'm sure there is a way 
around it, but for now this solution shoulld work just fine */

user_17692100 · Answer

ty this way:

and css

.outer{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

CSS to enable vertical alignment and responsiveness

2 Answers