如何在相对定位的 div 内水平居中对齐这个绝对定位的 `<a>` 标签？

Question

在下面的 SSCCE 中，我希望第 5 个 <a> 元素水平居中对齐。

我试过 align="center" HTML 属性，以及 text-align:center CSS 属性 .wrapper div 但是似乎没有任何效果。

那么我怎样才能让它工作呢？ 如何水平对齐第 5 个 '' 元素？

注意： 给定的代码是示例。在真实的网页中，我总共可以有 6 个标签，在这种情况下，我希望将第 2 行的 2 水平居中对齐；我可以有 7 个元素，在这种情况下，我必须将第 2 行中的 3 居中对齐...依此类推。任何行中标签的最大数量，因为它必须是显而易见的，是4.

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

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

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

Answer 2

要实现你想要的：

您需要更改样式 css .

首先： 将 text-align: center; 添加到您的 wrapper class.

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

其次：将position: absolute;更改为display: inline-block;，然后在anchorclass中添加width: 24%;。

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

第三：去掉span-container和span-twoclass中不需要的properties。它看起来像这样：

.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 class 与 anchor class 的底部对齐。在 anchor class 中添加 position: relative; 然后在 span-container class.

中添加 position: absolute;

已更新JsFiddle link。

希望对您有所帮助。

如何在相对定位的 div 内水平居中对齐这个绝对定位的 `<a>` 标签？

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

html

css

alignment

text-align