需要一个具有左右浮动2张图像的div，并将它们放在btwn中的文本放置在div的正中央

Question

<div class="wrapper" style="border-bottom: 2px solid black;text-align:center;">
    <div class="left" style="float:left;">
        <img class="styleLogo" src="ss.png">
    </div>
    <div class="right" style="float:right;">
        <a href="home.html">
           <img class="styleHome" src="home.png"></a>
    </div>
    <div class="center" style="text-align:left; margin:0 auto !important; display:inline-block">
        <h2 class="heading1">ss</h2>
        <h2 class="heading2">yyyy</h2>
        <h5 class="subHeading1">jjjjjj</h5>
        <h5 class="subHeading2">yyyyyy</h5>
    </div>
</div>

[这是我尝试过的代码。plshelp。我想使ss.png向右浮动，而home.png向左浮动，并且标题应位于具有包装类的div的确切中心。

Answer 1

<div class="wrapper" style="border-bottom: 2px solid black;text-align:center;">
    <div class="flex" style="display:flex;flex-direction:row;justify-content:center;justify-content:space-between;">
        <img class="styleLogo" src="ss.png">
        
        <h2 class="heading1">ss</h2>
        <h2 class="heading2">yyyy</h2>
        <h5 class="subHeading1">jjjjjj</h5>
        <h5 class="subHeading2">yyyyyy</h5>
        
        <img class="styleLogo" src="ss.png">
    </div>
    </div>

    </div>
    </div>
</div>

Answer 2

[您可以简单地使用CSS flexbox来创建这种结构，只需将div元素设置为classwrapperflexbox，然后使用适当的规则在其中对齐内容，例如，首先按所需的顺序放置元素出现在网页上

<div class="wrapper">
    <div class="left">
        <img class="styleLogo" src="https://dummyimage.com/300.png/09f/fff">
    </div>

    <div class="center">
        <h2 class="heading1">ss</h2>
        <h2 class="heading2">yyyy</h2>
        <h5 class="subHeading1">jjjjjj</h5>
        <h5 class="subHeading2">yyyyyy</h5>
    </div>
    <div class="right">
        <a href="home.html">
           <img class="styleHome" src="https://dummyimage.com/300.png/09f/fff"></a>
    </div>
</div>

然后使用此CSS根据您的需要调整内容
    .wrapper{
      display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
      -webkit-box-pack:justify;
          -ms-flex-pack:justify;
              justify-content:space-between;
      border:1px solid #000;
      align-items:center;
      text-align:center;
    }
    .left img, .right img{
      width:100%;
    }
    .center{
      min-width:33.33%;
    }

您可以根据自己的意愿更改左，右和中心div的宽度或容纳内容，如果您希望内容垂直居中，则只需向包装div align-items:center;添加一条新规则>
如果您不熟悉flexbox的概念，则可以访问此资源以获取更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/
希望有帮助！