Masood
Masood
Programming language:CSS
2021-04-20 11:34:30
0
Q:

css flex center

aircraft
aircraft
Code: CSS
2021-01-18 07:46:50 
display: flex;
align-items: center;
justify-content: center;
2
Steven Hopkins
Steven Hopkins
Code: CSS
2021-02-10 07:28:47 
/* Answer to: "css flex vertical align" */

.box {
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
}

.box div {
  width: 100px;
  height: 100px;
}

/*
  For more information go to:
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
*/
8
asdhkashd
asdhkashd
Code: CSS
2021-02-07 23:09:41 
section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
}
2
Jessie Buffum
Jessie Buffum
Code: CSS
2021-02-07 23:11:17 
	display: flex;
    width: 60%;
    justify-content: center;
    margin: 0 auto;
0
eslsyc
eslsyc
Code: CSS
2021-07-29 07:24:16 
.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
}

.left {
    margin-right:auto;
}
3
james_womack
james_womack
Code: CSS
2021-02-07 23:07:13 
.box.flex {
  display: flex;
  justify-content: center;
}
0
nandermind
nandermind
Code: CSS
2021-01-18 07:45:00 
align-items: flex-start | flex-end | center | baseline | stretch

.container {
  display: flex;
  align-items: flex-start;
}
2
Hzc
Hzc
Code: CSS
2021-02-07 23:10:48 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Flex Item Image</title>
<style>
.box {
   width:80%;
   min-height:80vh;
   margin:auto;
   border:1px solid;
   display: flex;
   align-items: center;
   justify-content: center; /* not really needed with auto margin on img*/
}
.box img {
   display: block;
   width: 80%;
   min-width:100px;
   max-width: 350px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}
</style>

</head>
<body>

<div class="box">
   <img src="http://via.placeholder.com/350x250" width="350" height="250" alt="missing image">
</div>

</body>
</html>
0

Tags

Related

New to Communities?

Join the community