1
在下面的SSCCE中，我希望第5個<a>元素在中心水平對齊。如何在相對定位的div內水平對齊這個絕對定位的`<a>`標籤？
我試過align="center" HTML屬性，以及text-align:center.wrapper div的CSS屬性，但似乎沒有任何工作。
那麼我該如何得到這個工作？ 我應該如何水平對齊第5個元素？
說明：給定的代碼是一個例子。在真實的網頁中，我總共可以有6個標籤，在這種情況下，我希望水平居中對齊第二行中的2;我可以有7個元素，在這種情況下，我將不得不在第二排中居中對齊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;
}
嘿，這已經打亂了'.span-container'的對齊。它由底部對齊到底部：10％;左：10％;'。現在看起來不起作用，它似乎與頂部一致。 – Solace
如果您能爲此提出建議，我將不勝感激。 – Solace
@Solace好的。看看我更新的答案。 –