Centering an image in flexbox-CodePudding

I have a flex box container with three internal items, I'm trying to make the middle item bigger than the rest with a centered image. Really struggling with this. Here's the code.

<!doctype html>
<html>
<head>
<title>Portfolio</title>
<style> .holdingcontainer0{width: 100%; display: flex; }
.internalcontainerL0{flex:1; background: #C1C1C1; padding: 30px; border-radius: 20px; font-size:20px; font-family: arial; margin:10px; color: #00486B;}
.internalcontainerM0{flex-grow:2; background: #00486B; padding:30px; border-radius: 20px; font-size: 20px; font-family: arial; margin: 10px; color: #00386B;}
.internalcontainerR0{flex:1; background: #C1C1C1; padding:30px; border-radius: 20px; font-size:20px;font-family: arial; margin: 10px; color: #00486B}
.title {font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family:arial; color: #00486B;}
</style>
</head>
<h1 class="title">PORTFOLIO </h1>
<body>
<div class="holdingcontainer0">
<div class="internalcontainerL0"> <a href="#"><h1>OLD WORK</h1></a>
<img src="circ.png" alt="jojo" width="100" height="100"></div>
<div class="internalcontainerM0"> <a href="#"><h1>GAMES</h1></a>
<img src="joseph.jpg" alt="jojo" width="200" height="150"></div>
<div class="internalcontainerR0"> <a href="#"><h1>ABOUT ME</h1></a>
<img src="circ.png" alt="jojo" width="100" height="100"></div>
</div>
</div>
</body>
</html>

CodePudding user response：

You can use flex attribute again inside internal containers. Then align items to center(horizontally and vertically). I used the below class for your all internal containers.

.sub-container{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

<!doctype html>
<html>
<head>
<title>Portfolio</title>
<style> .holdingcontainer0{width: 100%; display: flex; }
.internalcontainerL0{flex:1; background: #C1C1C1; padding: 30px; border-radius: 20px; font-size:20px; font-family: arial; margin:10px; color: #00486B;}
.internalcontainerM0{ flex-grow:2; background: #00486B; padding:30px; border-radius: 20px; font-size: 20px; font-family: arial; margin: 10px; color: #00386B;}
.internalcontainerR0{flex:1; background: #C1C1C1; padding:30px; border-radius: 20px; font-size:20px;font-family: arial; margin: 10px; color: #00486B}
.title {font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family:arial; color: #00486B;}
.sub-container{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<h1 class="title">PORTFOLIO </h1>
<body>
<div class="holdingcontainer0">
<div class=" sub-container internalcontainerL0"> <a href="#"><h1>OLD WORK</h1></a>
<img src="circ.png" alt="jojo" width="100" height="100"></div>
<div class="sub-container internalcontainerM0"> <a href="#"><h1>GAMES</h1></a>
<img src="joseph.jpg" alt="jojo" width="200" height="150"></div>
<div class="sub-container internalcontainerR0"> <a href="#"><h1>ABOUT ME</h1></a>
<img src="circ.png" alt="jojo" width="100" height="100"></div>
</div>
</div>
</body>
</html>

CodePudding user response：

This is a quick fix of your code.

Heading information can be used by user agents to construct a table of contents for a document automatically. So it's not a good idea to only have H1 tags. Please read up on this subject.

margin: auto is a good choice in this case but the image must have its own container.

.holdingcontainer0 {
  width: 100%; 
  display: flex; 
}
.internalcontainerL0 {
  flex:1; 
  background: #C1C1C1; 
  padding: 30px; 
  border-radius: 20px; 
  font-size:20px; 
  font-family: arial;
  margin:10px;
  color: #00486B;
}
.internalcontainerM0 {
  flex-grow:2; 
  background: #00486B; 
  padding:30px; 
  border-radius: 20px; 
  font-size: 20px; 
  font-family: arial; 
  margin: 10px; 
  color: #00386B;
}

.internalcontainerM0 > img {
  display: flex;
  margin: auto;
}

.internalcontainerR0 {
  flex:1; 
  background: #C1C1C1; 
  padding:30px; 
  border-radius: 20px; 
  font-size:20px;
  font-family: arial; 
  margin: 10px; 
  color: #00486B
}


.title {
  font-size: 50px; 
  text-align: center; 
  background-color: #C1C1C1; 
  border-radius: 20px; 
  font-family:arial; 
  color: #00486B;
}

<body>
   <h1 class="title">PORTFOLIO </h1>
    <div class="holdingcontainer0">
      <div class="internalcontainerL0"> 
        <a href="#"><h2>OLD WORK</h2></a>
        <img src="circ.png" alt="jojo" width="100" height="100">       
      </div>
    
      <div class="internalcontainerM0"> 
        <a href="#"><h2>GAMES</h2></a>
        <img src="https://webkit.org/demos/srcset/image-src.png" alt="jojo" width="200" height="150" >     
      </div>
    
      <div class="internalcontainerR0"> 
        <a href="#"><h2>ABOUT ME</h2></a>
        <img src="circ.png" alt="jojo" width="100" height="100">       
      </div>
  </div>
</body>

CodePudding user response：

Your code works good for me. You just do two mistakes:-

1. Look at the h1 tag with class title. It is outside the body tag.

2. Look at the two closing div tag (). One tag is extra.

But even with these mistakes, it is working good for me. The middle item is bigger than other two as you have given flex-grow:2 to middle item. At desktop, it is working fine.

I think you are talking about at lower devices screens. So for that, you can use media queries. Or you can use bootstrap to easily make it responsible.