Question

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

Answer 1

实现你想要的东西：

您需要更改 css 中的样式。

首先：将text-align: center;添加到wrapper课程。

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

第二：将position: absolute;更改为display: inline-block;，然后在width: 24%;课程中添加anchor。

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

注意：您现在可以删除css中的其他.anchorX。例如。 .anchor1，.anchor2和.anchor3。

第三：删除properties和span-container课程中不必要的span-two。它看起来像这样：

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

这里是JsFiddle demo link。

提醒：如果您要使用max-width属性，请将width属性设置为不超过max-width值。

的更新

将span-container课程与anchor课程的底部对齐。在position: relative;课程中添加anchor，然后在position: absolute;课程中添加span-container。

更新了JsFiddle link。

希望它有所帮助。

Answer 2

在p元素中包含链接，如下所示：

＆＃13;

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

＆＃13;

如何水平居中对齐这个绝对定位的“<a>` tag inside the relatively positioned div?

2 个答案: