时间戳

首页 > 解决方案 > 在 flexbox 中将图像居中

html - 在 flexbox 中将图像居中

问题描述

我有一个带有三个内部项目的弹性盒子容器，我试图通过居中的图像使中间项目比其他项目更大。真的在为此苦苦挣扎。这是代码。

<!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>

标签： htmlcssflexbox

解决方案

您可以在内部容器中再次使用 flex 属性。然后将项目对齐到中心（水平和垂直）。我将以下类用于您的所有内部容器。

.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>

推荐阅读