需要一个 div，其中有 2 个左右浮动的图像和它们之间的文本，它们要放置在 div 的确切中心

Posted 2023-03-05

【中文标题】需要一个 div，其中有 2 个左右浮动的图像和它们之间的文本，它们要放置在 div 的确切中心

【英文标题】：need a div with 2 images floating right and left and text in btwn them which to be placed in the exact center of the div

【发布时间】：2020-09-29 08:52:30

【问题描述】：

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

这是我尝试过的代码。请帮助。我想让 ss.png 向右浮动，home.png 向左浮动，并且标题应该位于带有包装类的 div 的确切中心。

【问题讨论】：

使用float 方法，您走在了正确的轨道上。首先照顾你的花车，然后是中心。你也可以试试CSS grid-container。我在my website 的页脚套接字中使用了float 方法。使用检查器找出我做了什么。

你能告诉我代码吗？如何在这个代码中应用。

我将您的代码放在this jsfiddle 中，它似乎可以按照您的意愿工作。这种行为有什么问题？

如果你使用 float 方法，你将需要以某种方式contain the floats。最简单的方法可能是添加第四个空的 div，样式为 clear: both; 。检查this jsfiddle

你的意思是每个标题都应该垂直居中like this?？

【参考方案1】：

使用“浮动”方法：

如果您希望中心元素忽略左右元素并在视口中居中而不考虑左右元素的大小，则需要将中心绝对定位到包装器（或使用javascript查找左右的宽度并相应地设置边距）。见this fiddle

.wrapper 
  position: relative;
  width: 100%;
  border-bottom: 2px solid black;
  text-align: center;


.left 
  float: left;


.right 
  float: right;


.center 
  position: absolute;
  width: 100%;
  margin: 0 auto;

.center > h2, .center > h5 
  margin: 0 auto;

.clearfloats 
  clear: both;

<div class="wrapper">
  <div class="left">
    <img class="styleLogo" src="https://dummyimage.com/170x170">
  </div>
  <div class="right">
    <a href="home.html">
      <img class="styleHome" src="https://dummyimage.com/50x45"></a>
  </div>
  <div class="center">
    <h2 class="heading1">ss</h2>
    <h2 class="heading2">yyyyyyy</h2>
    <h5 class="subHeading1">jjjjjj</h5>
    <h5 class="subHeading2">yyyyyyyyyyyy</h5>
  </div>
  <div class="clearfloats"></div>
</div>

要将正确的图像放置在包装器的右下角，您可以绝对定位它而不是浮动它。只需更改.right 类like this:

.right 
  position: absolute;
  right: 0;
  bottom: 0;

使用“CSS Grid”方法：

您可以消除浮动和绝对定位。在网格内有各种定位选项。见this jsFiddle

.wrapper 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 2px solid black;
  text-align: center;


.left 
  justify-self: start;


.center 
  align-self: center;
  

.right 
  align-self: end;
  justify-self: end;


.center > h2,
.center > h5 
  margin: 0 auto;

<div class="wrapper">
  <div class="left">
    <img class="styleLogo" src="https://dummyimage.com/170x170">
  </div>
  <div class="center">
    <h2 class="heading1">ss</h2>
    <h2 class="heading2">yyyyyyy</h2>
    <h5 class="subHeading1">jjjjjj</h5>
    <h5 class="subHeading2">yyyyyyyyyyyy</h5>
  </div>
  <div class="right">
    <a href="home.html">
      <img class="styleHome" src="https://dummyimage.com/50x45"></a>
  </div>
</div>

【讨论】：

我已经扩展了答案以包含 CSS Grid 方法。请接受您认为最能回答您的问题的答案，以帮助 *** 的其他用户。

【参考方案2】：

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

【讨论】：

对于哪个 div 我必须给这个。你能告诉我代码吗。

哦等等...分开两个图像，但将文本放在与文本相同的 div 中。将第二张图片放在 div 的最后部分

我希望第一个图像浮动到左侧，第二个浮动到 div 的左侧。文本应该出现在 div 的确切中心，类 wrapper.pls help.urgent.pls 显示一个示例我的要求的代码。

不，这两个图像的大小不同，标题应该在单独的行中，但在带有类包装器的 div 的确切中心。

【参考方案3】：

您可以简单地使用 CSS flexbox 制作这种结构，只需使用类 wrapper flexbox 制作 div 元素，然后使用适当的规则在其中对齐您的内容，例如首先将元素按您希望的顺序放置它们出现在网页上

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

编辑：根据您的要求，使中心 div 保持在精确的中心，而不管侧面 div 的大小和位置如何，您可以在中心 div 上使用position:absolute;，如下所示：

.wrapper
  display:flex;
  justify-content:space-between;
  border:1px solid #000;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;

.right
 margin-top:auto;

.right img
  width:50px;
  height:45px;
  display:block;

.left img
  width:170px;
  height:170px;
  display:block;

.center
  min-width:33.33%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid red;

希望对你有帮助！

【讨论】：

你也可以检查这个小提琴jsfiddle.net/dcejbq3s

+1 干得好。如果您不介意清理您的代码 like this 并编辑您的答案。

@ChrisL 感谢您对我的回答表示赞赏，我还按照您的建议清理了我的代码，只是为 flexbox css 留下了浏览器供应商前缀。

看起来很棒！加分可扩展您的答案并包含另一个使用 grid-container 方法的示例。

所以你希望中心元素忽略左右元素，并在视口中完美居中而不管左右元素的大小。这将需要对中心元素进行绝对定位。