В следующем SSCCE я хочу, чтобы элемент 5 <a> был горизонтально выровнен по центру.Как горизонтально центрировать выравнивание этого абсолютно позиционированного `<a>` тега внутри относительно позиционированного div?
Я пробовал align="center" HTML-атрибут, а также text-align:center Свойство CSS на .wrapper div, но ничего не работает.
Так как я могу заставить это работать? Что нужно сделать для горизонтального выравнивания 5-го элемента?
Примечание:Данный код является примером. На реальной веб-странице я могу иметь в общей сложности 6 тегов, и в этом случае мне нравится горизонтально центрировать выровнять 2 в 2-й строке; и я могу иметь 7 элементов, в этом случае мне придется центрировать выровнять 3 в 2-й строке ... так далее. Максимальное количество тегов в любой строке, как это должно быть очевидно, является 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 Ok. Ознакомьтесь с моим обновленным ответом. –