在居中图像旁边添加浮动文本答案

【问题标题】：Adding floating text next to centered images在居中图像旁边添加浮动文本
【发布时间】：2022-01-11 15:05:29
【问题描述】：

我想在居中的图像旁边添加一些文本。我想将图像保持在页面的中心，而文本只是浮动在图片的两侧（不将图像移动到页面的两侧）

这是我的代码（随机免费图片仅供提问）：

    .whole h2 {
        margin-top: 15px;
        text-align: center;
    }
    
    .row1 {
        height: 250px;
        margin: 0 auto;
    }
    
    .img1 {
        margin: 0 auto;
        width: 200px;
        display:block;
    }
    
    .text1 {
        text-align: right;
        float: left;
    }
    
    .img2 {
        margin: 0 auto;
        width: 200px;
        display: block;
    }
    
    .row2 {
        height: 250px;
        margin: 0 auto;
    }
    
    .text2 {
        text-align: left;
        float: right;
    }

  <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>page</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <div class="whole">
                <h2>Experience</h2>
                <div class="row1">
                    <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
                    <div class="text1">
                        <h3>year</h3>
                        <p>xxxxxxxxxxxxx</p>
                    </div>
                </div>
                <div class="row2">
                    <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
                    <div class="text2">
                        <h3>year</h3>
                        <p>xxxxxxxxxxxxx</p>
                    </div>
                </div>
            </div>
        </body>
    </html>

我尝试过使用 inline-block 来处理图像，但我无法将它们居中。一般来说，文本以某种方式将图像从中心推开，我在网上找不到与我类似的案例。提前感谢您的任何提示。

【问题讨论】：

网格布局怎么样？见developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
非常感谢！我认为这是最好的解决方案，因为我想让文本靠近图像。

标签： html css image

【解决方案1】：

使用代码最简单的方法是使用绝对位置

.whole h2 {
  margin-top: 15px;
  text-align: center;
}

.row1 {
  height: 250px;
  margin: 0 auto;
  position:relative;
}

.img1 {
  margin: 0 auto;
  width: 200px;
  display: block;
}

.text1 {
  text-align: right;
  position:absolute;
  top:20%;
  left:15%;
 
}

.img2 {
  margin: 0 auto;
  width: 200px;
  display: block;
}

.row2 {
  height: 250px;
  margin: 0 auto;
  position:relative;
}

.text2 {
  text-align: left;
  position:absolute;
  top:20%;
  right:15%;
  
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>page</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="whole">
    <h2>Experience</h2>
    <div class="row1"  >
      <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
      <div class="text1">
        <h3>year</h3>
        <p>xxxxxxxxxxxxx</p>
      </div>
    </div>
    <div class="row2">
      <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
      <div class="text2">
        <h3>year</h3>
        <p>xxxxxxxxxxxxx</p>
      </div>
    </div>
  </div>
</body>

</html>

或者我们可以用 flex 来做到这一点：当你使用 absolute 时，它会将元素从常规的 dom 流中取出。更好地使用 flex，让响应式设计更容易

.whole h2 {
  margin-top: 15px;
  text-align: center;
}

.row1 {
  height: 250px;
  margin: 0 auto;
  display:flex;
  align-items:center;
}

.img1 {
  margin: 0 auto;  
  display: block;
}

.text1{
   text-align:right;}

.r1{
   width:30%;}

.img2 {
  margin: 0 auto; 
  display: block;
}

.row2 {
  height: 250px;
  margin: 0 auto;
  display:flex;
  align-items:center;
}

.text2 {
  text-align: left;
  
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>page</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="whole">
    <h2>Experience</h2>
    <div class="row1">
       <div class="text1 r1">
        <h3>year</h3>
        <p>xxxxxxxxxxxxx</p>
      </div>
      <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
      
      <div class='r1'>&nbsp;</div>
    </div>
    <div class="row2">
      <div class='r1'>&nbsp;</div>
      <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
      <div class="text2 r1">
        <h3>year</h3>
        <p>xxxxxxxxxxxxx</p>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：