How to horizontally center align this absolutely positioned `<a>` tag inside the relatively positioned div?

Question

How to horizontally center align this absolutely positioned `<a>` tag inside the relatively positioned div?

417 views Asked by Solace At 25 June 2015 at 01:59

In the following SSCCE, I want the 5th <a> element to horizontally align in the center.

I have tried align="center" HTML attribute, as well as text-align:center CSS property on .wrapper div but nothing seems to work.

So how can I get this to work? What should I do to horizontally align the 5th '' element?

Note: The given code is an example. In the real web page, I can have a total of 6 tags, in which case I will like to horizontally center align the 2 's in the 2nd row; and I can have 7 elements in which case I will have to center align the 3 's in the 2nd row...so on. The maximum number of tags in any row, as it must be apparent, is 4.

enter image description here

SSCCE - index.php

<?php 

$number_of_anchors=5;
$images_array = array('http://shutupandtakemethere.com/pics/022014/stairs-in-a-japanese-garden-big.jpg', 'http://piximus.net/media/9366/beautiful-places-on-the-world-20.jpg', 'http://freetopwallpaper.com/wp-content/uploads/2013/09/free-beautiful-place-wallpaper-hd-161.jpg', 'http://images2.fanpop.com/images/photos/6900000/Beautiful-Places-national-geographic-6969096-1600-1200.jpg', 'http://www.advertising-photographer-new-york.com/galleries/Travel%20Photographs/photos/spain_countryside_3984.jpg', 'http://www.brisbane-australia.com/media/images/2011_somerset_dam_countryside.jpg', 'http://www.worldholidaydestinations.com/australia/nsw/glen-innes/row3-photo1.jpg', 'http://commondatastorage.googleapis.com/static.panoramio.com/photos/original/21768043.jpg', 'http://www.countrysideshow.co.uk/sites/default/files/imagecache/HP_SS1_990x514/rotor/hh%20ss%201.jpg');

?>

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>


<body>
    <div class="wrapper">

    <?php
    $anchor_width=0;

    if ($number_of_anchors<4) {
        $anchor_width=(100/3);
    } else if ($number_of_anchors>=4) {
        $anchor_width=(100/4);
    }

    $anchor_left=0;

    $anchor_top=0;


    for ($j=1; $j<=$number_of_anchors; $j++) {
        //echo 'The value of $j is '.$j.'<br>';//check

        //echo '$j: '.$j.'<br>';
        //echo '$j%4 : '.($j%4).'<br>';
        if ($j%4==1) {
            //echo 'Entered the ($j%4==1) condition.';
            if ($j!=1) {
                //echo ' Also entered the ($j!=1) condition.';
                $anchor_top = $anchor_top + 300 + 20;//because the height of an anchor is 300 and 20 is the top and bottom padding of 10.
                $anchor_left = 0;
            }
        }

        echo '<a class="anchor anchor'.($j).'" href="#" style="top:'.$anchor_top.'px; left:'.$anchor_left.'%; width:'.($anchor_width-1).'%; background-image: url('.$images_array[$j-1].');">';
            echo '<!--<span class="span-container">
                        <span class="span-one">SPAN ONE</span>
                        <span class="span-two">SPAN TWO</span>
            </span>-->';
        echo '</a>';

        $anchor_left = $anchor_left + $anchor_width;


    }

    ?>

    </div>
</body>

</html>

styles.css

.wrapper {
    width:100%;
    max-width:90%;
    margin: 0px auto;

    position:relative;
    left:0px;
    right:0px;
}


.anchor1 {
    left:0px;
}

.anchor2 {
    left:25%;
}

.anchor3 {
    left:50%;
}

.wrapper .anchor::before {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0px;
    top: 0px;
    content: " ";
    transition: all 0.3s ease 0s;
}

.anchor {
    position: absolute;
    /*height: 25vw;*/
    height:300px;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    margin: 10px 0;
}

.span-container {
    position: absolute;
    display: block;
    left: 10%;
    bottom: 10%;
    width: 80%;
}

.span-one {
    font-size: 271.579%;
    color: #FFF;
}

.span-two {
    font-size: 214.737%;
    display: block;
    color: #FFF;
    font-weight: 100;
    line-height: 0.9;
}

Original Q&A

There are 2 answers

Triforcey On 25 June 2015 at 04:41

Have the link inside of a p element, like this:

<div>
  <p align="center">
    <a href="https://www.google.com/">centered link to google inside a div tag</a>
  </p>
</div>

**Alberto I.N.J.** · Accepted Answer · 2015-06-25 05:58:07

To achieve what you want:

You need to change a couple of styles in your css.

First: Add text-align: center; to your wrapper class.

.wrapper {
    position:relative;
    width:90%;
    max-width:90%;
    margin: 0px auto;
    left:0px;
    right:0px;
    text-align: center;
}

Second: Change position: absolute; to display: inline-block; then add width: 24%; in your anchor class.

.anchor {
    display: inline-block;
    width: 24%;
    height:300px;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    margin: 10px 0;
}

Note: You can remove now the other .anchorX in your css. E.g. .anchor1, .anchor2 and .anchor3.

Third: Remove the unnecessary properties of span-container and span-two class. It will look like this:

.span-container {
    left: 10%;
    bottom: 10%;
    width: 80%;
}

.span-one {
    font-size: 271.579%;
    color: #FFF;
}

.span-two {
    font-size: 214.737%;
    color: #FFF;
    font-weight: 100;
    line-height: 0.9;
}

Here's the JsFiddle demo link.

Reminder: If your going to use max-width property, set the width property not exceeding the max-width value.

Update:

To align the span-container class to the bottom of the anchor class. Add position: relative; in the anchor class then add position: absolute; in the span-container class.

Updated JsFiddle link.

Hope it helps.

TechQA.

How to horizontally center align this absolutely positioned `<a>` tag inside the relatively positioned div?

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in TEXT-ALIGN

Popular Questions

Popular Tags

Trending Questions