Блог

Главная - Вопросы по программированию - Центрирование изображения в flexbox

Центрирование изображения в flexbox

#html #css #flexbox

Вопрос:

У меня есть контейнер flex box с тремя внутренними элементами, я пытаюсь сделать средний элемент больше, чем остальные, с центрированным изображением. Действительно борется с этим. Вот код.

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

Комментарии:

1. это не имеет никакого отношения к вашей проблеме, но ваш код недействителен — у вас есть тег h1 между тегами головы и тела и дополнительный закрывающий div

2. Сделайте контейнер div также гибким элементом, а затем используйте либо align-items: center на нем, если вы хотите центрировать как ссылку, так и изображение, либо применяйте align-self: center только к изображению.

Ответ №1:

Вы можете снова использовать атрибут 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>

Комментарии:

1. Именно то, что я хотел, спасибо.

Ответ №2:

Это быстрое исправление вашего кода.

Информация о заголовке может использоваться агентами пользователей для автоматического построения оглавления документа. Так что не очень хорошая идея иметь только теги H1. Пожалуйста, ознакомьтесь с этой темой.

margin: auto в этом случае это хороший выбор, но изображение должно иметь свой собственный контейнер.

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

Ответ №3:

Ваш код хорошо работает для меня. Ты просто делаешь две ошибки:-

1. Посмотрите на тег h1 с названием класса. Он находится за пределами метки тела.

2. Посмотрите на два закрывающих тега div (). Один тег является дополнительным.

Но даже с учетом этих ошибок это хорошо работает для меня. Средний элемент больше, чем два других, так как вы дали flex-grow:2 для среднего элемента. На рабочем столе он работает нормально.

Я думаю, вы говорите о более низких экранах устройств. Поэтому для этого вы можете использовать медиа-запросы. Или вы можете использовать bootstrap, чтобы легко сделать его ответственным.

Метки: