CODEWITHSUNDEEP
htmlcss
user4227915
user4227915

Reputation:

Centering images inside divs

I have a footer with nine links.. I simulated my problem with this two links:

I need to center (vertical and horizontal) all classes treeText.

Each treeText is an image with some text drawed. It should stay in the middle of the tree.

I have this html:

<footer>
    <div class="grove">
        <div class="link">
            <img class="tree" />
            <img class="treeText" src="https://i.sstatic.net/CxqQu.png" />
        </div>
        <div class="link">
            <img class="tree" />
            <img class="treeText" src="https://i.sstatic.net/zROOo.png" />
        </div>
    </div>
</footer>

and this css:

footer, div, img {
    position: absolute;
    margin: 0;
    padding: 0;
}
footer {
    width: 400px;
    height: 400px;
    border: 1px dotted #000;
}
.grove {
    width: 400px;
    text-align: center;
    bottom: 0;
} 
.link {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
}
img.tree {
    content: url('https://i.sstatic.net/Imj11.png');
}
img.treeText {
    margin: auto;
    -webkit-filter: invert(100%);
}

Live here.

Thanks for your time.

Upvotes: 1

Views: 46

Answers (1)

Ronald Zwiers
Ronald Zwiers

Reputation: 840

Try this:

footer {
  width: 400px;
  height: 400px;
  border: 1px dotted #000;
}
.grove {
  width: 400px;
  text-align: center;
  bottom: 0;
} 
.link {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
}
img.tree {
  content: url('https://i.sstatic.net/Imj11.png');
}

img.treeText {
  -webkit-filter: invert(100%);
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto; 
}

Upvotes: 1

Related Questions