I have been search the internet for a few days now but I cant seem to find a solution to solve my issue, when I try the numerous articles that I find in regard to centering elements they don’t appear to work for me.
I am trying to achieve the result attached in this site design mockup:
In the head section of your developmental page, you have information such as links to CDNs that affect this page, don’t you? Perhaps you can post a “working page” that includes this information along with URLs to the images, if necessary so we can see the same trouble that you see.
In case any part of this is imported in PHP calls, we cannot read PHP. We need HTML and CSS.
Forget using relative and absolute positioning for this. Such methods are fragile.
There are two main methods for centring both horizontal and vertical.
There is display: table-cell and Flexbox. Either could be used for a layout like this and be fully responsive.
Edit: I just noticed you have what looks like some bootstrap classes in your html. That may have some bearing on how you do this.
Yes come out of the bootstrap grid because you don’t want to do this with floats. Just because you use bootstrap doesn’t mean you have to use the grid for everything.
This can be done more simply with display table structure or flex box as mentioned by others. I’m not at a computer at the moment but I’m sure Ron or Sam can knock up a demo
Following the suggestions @SamA74 and @PaulOB gave I restyled you posted html as a standalone demo you can test. The css table approach can also vertically align cell content. You don’t have to go with the table approach if you prefer bootscrap, just skip the css table styles and restore the col classes.
I also skipped the arrow divs and moved the arrow classes to the parent to instead use a pseudo element for the arrow. The arrows are made by borders on a zero size block, i.e. the four borders are growing outwards and each forms a triangle where only one has got a color to show.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
/*** https://www.sitepoint.com/community/t/issues-centering-child-div-within-parent-vertically-and-horizontally/252244/5 ***/
.services{ display:table; border-collapse:collapse;}
.row{ display:table-row;}
.row > div{ display:table-cell; border:0; vertical-align:middle;}
.info-parent{
position:relative;
color:gray;
font:1.1em/1.5 sans-serif;
}
.arrow-down{
background:#7cd;
color:#eee;
}
.information{
margin:0 18%;
text-align:center;
}
.information h2{
margin:0;
}
.information p{
margin:3em 0;
line-height:2;
}
.information a{
display:block;
border:1px solid;
padding:1em;
color:inherit;
text-decoration:none;
}
/*** arrows: set color on its base side ***/
.arrow-right::after,
.arrow-down::after,
.arrow-left::after{
position:absolute;
top:50%;
right:-60px;
margin-top:-30px;
border:30px solid transparent; /* half arrow width/height */
content:"";
}
.arrow-right::after{
border-left-color:#fff;
}
.arrow-down::after{
top:100%;
right:50%;
margin:0 -30px 0 0;
border-top-color:#7cd;
}
.arrow-left::after{
right:100%;
border-right-color:#fff;
}
</style>
</head><body>
<section class="services">
<div class="row">
<div class="info-parent arrow-right">
<div class="information">
<h2>Property Management</h2>
<p>Here at Pure, we know that no two homes are the same so our tailored home management packages are exactly that.</p>
<a href="#nogo">volorepre consequis</a>
</div>
</div>
<div class="img-information">
<img src="img/propMan.png" alt="Property Management" width="450" height="450" style="display:block; background:gray">
</div>
<div class="info-parent arrow-down">
<div class="information">
<h2>Housekeeping and Laundry Services</h2>
<p>Xerovitionsed quam velicid que et dolo quis ma dolorep erumque parit que mos volorepre consequis.</p>
<a href="#nogo">volorepre consequis</a>
</div>
</div>
</div>
<div class="row">
<div class="img-information">
<img src="img/propMan.png" alt="Property Keys" width="450" height="450" style="display:block; background:gray">
</div>
<div class="info-parent arrow-left">
<div class="information">
<h2>Secure Key Holding</h2>
<p>Xerovitionsed quam velicid que et dolo quis ma dolorep erumque parit que mos volorepre consequis.</p>
<a href="#nogo">volorepre consequis</a>
</div>
</div>
<div class="img-information">
<img src="img/propMan.png" alt="Property Housekeeping" width="450" height="450" style="display:block; background:gray">
</div>
</div>
</section>
</body></html>
```[quote="scjmoore, post:1, topic:252244"]
I am trying to achieve the result attached in this site design mockup:
[/quote]
The arrow divs could be positioned the same way.
