Как разместить эти 3 картинки слева и 3 картинки справа?

Question

У меня есть 6 изображений подряд, и я хочу расположить 3 слева и 3 справа. Я попробовал display: flex и float: left, но он просто увеличил весь контент под вкладкой раздела на перекрывающихся экранах. Как мне разделить 6 изображений пополам с текстом в середине?

<section className="open-text">
    <h1>
        <br/>
        <img className="move_to_left" height="70" width="70"  alt="usda_icon" src= "images/FDAT.gif"/>
        <img className="move_to_left" height="70" width="70"  alt="usda_icon" src= "images/usdaT.gif"/>
        <img className="move_to_left" height="80" width="80"  alt="usda_icon" src= "images/dermT.png"/>
        ***String of Text***
        <img className="move_to_right" height="90" width="90"  alt="usda_icon" src= "images/HypoT2.jpg"/>
        <img className="move_to_right" height="100" width="100"  alt="usda_icon" src= "images/ssl.png"/>
        <img className="move_to_right" height="80" width="80"  alt="usda_icon" src= "images/para2.gif"/>        
        <br/>
    </h1>
</section>

CSS

.open-text > h1 {
    color: #1e3a87;
    border-top: 1px solid white;
    margin-top: 12.5px !important;
    height: 10rem;    
    display: flex !important;
    align-items: center !important;
    mix-blend-mode: color-burn;    
    display: flex !important;
    align-items: center !important;
    font-family: 'Cinzel Decorative', cursive;
}
.open-text > h1 {
    /*border: 4px solid red;*/
    /*display: flex;*/
    /*justify-content: space-around;*/
    /*float: left;*/
}
.open-text > h1:nth-child(odd) {
    border: 1px solid red;
    /*float: right;*/
}

Answer 1

Используйте class = "" для имен классов в html

Это можно сделать с помощью flexbox, выбрав родительский элемент для выравнивания центральных элементов, затем вы установите для каждого элемента соответствующее плавающее положение внутри своего flex-бокса, align-self: start для левых и align-self: end; для правильных.

Вот пример того, как я бы это сделал:

.open-text {
  display:flex;
  align-items:center;
  justify-content:space-around;
}
.open-text h1 {
color: #1e3a87;    
display: flex;
align-items: center;
font-family: 'Cinzel Decorative', cursive;
justify-content:space-around;
}
.open-text img {
margin:5px;
}
.open-text .move_to_left {
  align-self:start;
}
.open-text .move_to_right {
  align-self:end;
}
.open-text .string_of_text {
  align-self:center;
}

<section class="open-text">
    <h1>
        <br/>
        <img class="move_to_left" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/70"/>
        <img class="move_to_left" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/70"/>
        <img class="move_to_left" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/70"/>
      <span class="string_of_text">***String of Text***</span>
        <img class="move_to_right" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/70"/>
        <img class="move_to_right" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/70"/>
        <img class="move_to_right" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/70"/>        
        <br/>
    </h1>
</section>

Answer 2

Самый простой способ сделать это - использовать свойство display inline-block. Вот пример использования некоторых цветных элементов div, но он будет работать так же на ваших изображениях.

display: inline-block;

JSFiddle: https://jsfiddle.net/chnbL179/

Answer 3

Если я правильно понимаю ваш вопрос, возможно, это подойдет вам?

Имейте в виду, что я заменил className на class, чтобы приведенный ниже пример работал - не забудьте отменить это, если вы выводите это через JSX:

.open-text > h1 {
    height: 10rem;    
    align-items: center;
    justify-content:center; /* Cause "vertical" center alignment */
    flex-direction:row; /* Spread children of h1 along the x-axis */
    display: flex;
}

.open-text > h1 > img {
    flex:1;  /* This causes the image elements to squish down so that
                text comfortably fits */

}
 

<section class="open-text">
    <h1>
        <img class="move_to_left" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/150"/>
        <img class="move_to_left" height="70" width="70"  alt="usda_icon" src= "https://via.placeholder.com/150"/>
        <img class="move_to_left" height="80" width="80"  alt="usda_icon" src= "https://via.placeholder.com/150"/>
        ***String of Text***
        <img class="move_to_right" height="90" width="90"  alt="usda_icon" src= "https://via.placeholder.com/150"/>
        <img class="move_to_right" height="100" width="100"  alt="usda_icon" src= "https://via.placeholder.com/150"/>
        <img class="move_to_right" height="80" width="80"  alt="usda_icon" src= "https://via.placeholder.com/150"/>        
        <br/>
    </h1>
</section>