Расположите логотипы по центру на странице и поместите их в сетку 3x2? - PullRequest
Новая
       0

Расположите логотипы по центру на странице и поместите их в сетку 3x2?

0 голосов
/ 26 мая 2020

Я не знаю, как их центрировать и сохранять по центру в соответствии с размером окна.

Вот как это должно выглядеть (сделано в xd)

(границы только для ориентации)

Код: 

#logos {
  outline: 5px dashed green;
}

.griditem {
  outline: 5px dashed red;
}

img {
  max-width: 300px;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HFFoto - Portfolio</title>
  <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="portfolio_kunden.css" />
  <link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="fullbodybg">
    <div id="logos">
      <img class="griditem" id="hygge_logo" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png">
      <img class="griditem" id="wellyou_Logo_Rot_Schwarz400" src="wellyou_Logo_Rot_Schwarz400.png" srcset="wellyou_Logo_Rot_Schwarz400.png 1x, wellyou_Logo_Rot_Schwarz400@2x.png 2x">
      <img class="griditem" id="Logo_muhlenbach" src="Logo_wei_.png" srcset="Logo_wei_.png 1x, Logo_wei_@2x.png 2x">
      <img class="griditem" id="Logo_neu_DOMKRUG" src="Logo_neu_DOMKRUG.png" srcset="Logo_neu_DOMKRUG.png 1x, Logo_neu_DOMKRUG@2x.png 2x">
      <img class="griditem" id="OMK_Kopie" src="OMK_Kopie.png" srcset="OMK_Kopie.png 1x, OMK_Kopie@2x.png 2x">
      <img class="griditem" id="hygge_logo_platzhalter" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png">
    </div>
  </div>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Ответ - flexbox. Добавьте еще один контейнер в свой код: 

<div id="container">
 <div id="logos">
      <img class="griditem" id="hygge_logo" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png">
      <img class="griditem" id="wellyou_Logo_Rot_Schwarz400" src="wellyou_Logo_Rot_Schwarz400.png" srcset="wellyou_Logo_Rot_Schwarz400.png 1x, wellyou_Logo_Rot_Schwarz400@2x.png 2x">
      <img class="griditem" id="Logo_muhlenbach" src="Logo_wei_.png" srcset="Logo_wei_.png 1x, Logo_wei_@2x.png 2x">
      <img class="griditem" id="Logo_neu_DOMKRUG" src="Logo_neu_DOMKRUG.png" srcset="Logo_neu_DOMKRUG.png 1x, Logo_neu_DOMKRUG@2x.png 2x">
      <img class="griditem" id="OMK_Kopie" src="OMK_Kopie.png" srcset="OMK_Kopie.png 1x, OMK_Kopie@2x.png 2x">
      <img class="griditem" id="hygge_logo_platzhalter" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png">
    </div>
  </div>

И в своей таблице стилей: 

#container
{
   width: /* Your width */
   height: /* Your height */
   display: flex;
   justify-content: center; /* This will center container with items horizontally */
   align-items: center; /* This will center container with items vertically */
}

#logos {
  outline: 5px dashed green;
  display: flex;
  flex-wrap: wrap;
  justify-items: space-evenly;
}

.griditem {
  outline: 5px dashed red;
  width: 30%; /* Three items in one line */
  height: /* Your height */
}

img {
  max-width: 300px;
  height: auto;
}
1 голос
/ 26 мая 2020

Вы можете использовать css гибкость и сетку

Пример кода: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HFFoto - Portfolio</title>
    <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="portfolio_kunden.css"/>
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<style>
    .logos {
        outline: 5px dashed green;
        display:flex;
        justify-content: center;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; // sets 3 columns
        grid-gap: 2rem // sets the spacing between elements
    }

    .griditem {
        outline: 5px dashed red;
    }

    img {
        max-width: 300px;
        height: auto;
    }
</style>
</head>
<body>
<div id="fullbodybg">
    <div class="logos">
        <div class="grid">
            <img class="griditem" id="hygge_logo" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png" >
            <img class="griditem" id="wellyou_Logo_Rot_Schwarz400" src="wellyou_Logo_Rot_Schwarz400.png" srcset="wellyou_Logo_Rot_Schwarz400.png 1x, wellyou_Logo_Rot_Schwarz400@2x.png 2x">
            <img class="griditem" id="Logo_muhlenbach" src="Logo_wei_.png" srcset="Logo_wei_.png 1x, Logo_wei_@2x.png 2x">
            <img class="griditem" id="Logo_neu_DOMKRUG" src="Logo_neu_DOMKRUG.png" srcset="Logo_neu_DOMKRUG.png 1x, Logo_neu_DOMKRUG@2x.png 2x">
            <img class="griditem" id="OMK_Kopie" src="OMK_Kopie.png" srcset="OMK_Kopie.png 1x, OMK_Kopie@2x.png 2x">
            <img class="griditem" id="hygge_logo_platzhalter" src="Hygge_Logo_final.png" srcset="Hygge_Logo_final.png, Hygge_Logo_final.png">
        </div>
    </div>
</div>
</body>
</html>

Я также изменил логотипы id на класс.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...