在列框上对齐图像的一半答案

【问题标题】：Align image halfway over a column box在列框上对齐图像的一半
【发布时间】：2019-12-04 18:43:56
【问题描述】：

我正在尝试复制下图

这是一个占位符图像，我想要用于 SEO 目的是具有三列/框，并将与每个框相关联的小图形居中在框边框上方并居中。以下是我目前尝试过的代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

.container{
position:relative;
width:100%;
height:200px;
}

.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;  
}

</style>
</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row">
<div class="column" style="background-color:#aaa;">
<div class="container">
<center>

<img class="alignnone size-blogimage wp-image-6540" 
src="https://service-works.com/wp- 
content/uploads/2018/10/services_icons_website-2.png" alt="" 
width="80" height="80"/>

</center> </div>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>

我也试过下面的 CSS

img {

vertical-align: middle; 
line-height: 0.5;
}

【问题讨论】：

标签： html css image css-float

【解决方案1】：

试试这个

.container{
position:relative;
width:100%;
height:200px;
text-align: center;
}

img {
    position: absolute;
    top: -25%;
    left: 40%;
}

转换这个

<div class="container">
<center>

<img class="alignnone size-blogimage wp-image-6540" 
src="https://service-works.com/wp- 
content/uploads/2018/10/services_icons_website-2.png" alt="" 
width="80" height="80"/>

</center> </div>

到

<div class="container">
<img class="alignnone size-blogimage wp-image-6540" 
src="https://service-works.com/wp- 
content/uploads/2018/10/services_icons_website-2.png" alt="" 
width="80" height="80"/>

</div>

【讨论】：

现在在 img css 中使用 left : 40% 查看更新后的答案，你准备好让我知道我的代码是正确的

【解决方案2】：

尝试负边距。这是更新的小提琴。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    /* Create three equal columns that floats next to each other */
    
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 300px;
      /* Should be removed. Only for demonstration */
    }
    /* Clear floats after the columns */
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    .container {
      position: relative;
      width: 100%;
      height: 200px;
    }
    h2{
margin-bottom:40px;
}
    .image {
      position: absolute;
      top: 0;
      left: 60%;
      width: 40%;
      height: 100%;
    }
    
    center {
      margin-top: -45px;
    }
    
    center img {
      background: red;
      display: inline-block;
      border-radius: 50px;
    }
  </style>
</head>

<body>

  <h2>Three Equal Columns</h2>

  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <div class="container">
        <center>

          <img class="alignnone size-blogimage wp-image-6540" src="https://service-works.com/wp- 
content/uploads/2018/10/services_icons_website-2.png" alt="" width="80" height="80" />

        </center>
      </div>
      <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>

【讨论】：