seo Question posted in
Some basic information to get you started with this can be found here.

Align image halfway over a column box – SEO

I am trying to replicate the below image
3 columns

This is a placeholder image what I want for SEO purposes is to have three columns/boxes and center the small graphic associated with each box half over the box border and centered. Below is the code I have tried so far.

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

I have also tried the following CSS

img {

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

2

Answers


  1. 0

    try this

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

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

    convert this 

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

    to 

    <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>
    Login or Signup to reply.
  2. 0

    Try negative margin.
    here is updated 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search