在列框的中间对齐图像

Question

我正在尝试复制下图

这是一个占位符图像，出于 SEO 目的，我希望它具有三个 columns/boxes 并将与每个框相关联的小图形居中放置在框边框的一半上方并居中。以下是我到目前为止尝试过的代码。

<!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;
}

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

Answer 2

试试负边距。这里更新了 fiddle.

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

在列框的中间对齐图像

Align image halfway over a column box

html

css

image

css-float