Горизонтально центр одного из трех якорных тегов

У меня есть 3 ссылки в нижнем колонтитуле. Они должны располагаться слева, в центре и вправо. Ссылки на стороне имеют некоторый запас по сторонам. Как я сосредотачиваю среднюю ссылку? Я могу изменить свой html на UL, если это необходимо.Горизонтально центр одного из трех якорных тегов

Это мой код до сих пор:

<footer> 
     <a href="#">Link1</a> 
     <a href="#" class="link2">Link2</a> 
     <a href="#" class="link3">Link3</a> 
</footer>

footer { 
    height: 50px; 
    line-height: 50px; 
    background-color: #ccc; 
    text-transform: uppercase; 
} 

footer a { 
    margin: 0 20px; 
} 

.link2 { 
    //This should be centered 
} 

.link3 { 
    float: right; 
}

Ссылка на Codepen: http://codepen.io/anon/pen/FgpAq

источник

2014-01-03 Filip Nilsson

Вы можете выравнивать нижний колонтитул по центру и плавать по первой и последней ссылке. Я использовал .link1 и .link3, но вы можете использовать footer a:first-child и footer a:last-child, если вам все равно, что pseduo-классы не поддерживаются всеми браузерами.

<footer> 
    <a href="#" class="link1">Link1</a> 
    <a href="#" class="link2">Link2</a> 
    <a href="#" class="link3">Link3</a> 
</footer>

CSS

footer { 
    text-align:center; 
    height: 50px; 
    line-height: 50px; 
    background-color: #ccc; 
    text-transform: uppercase; 
} 

footer a { 
    margin: 0 20px; 
} 

.link1 { 
    float:left; 
} 

.link3 { 
    float: right; 
}

источник

2014-01-03 00:20:39 Popnoodles

@DavidThomas Уже рассмотрены и отклонены как псевдо-классы не работают во всех браузерах. – Popnoodles

Работает ли 'a: first'? Я не знал, что это правильный селектор CSS; ': first-child' - псевдокласс, а не псевдоэлемент. –

Нет, это была опечатка, которую я уже исправил. – Popnoodles

Несмотря на то, что это не может быть хорошей практикой вы можете просто сделать это:

.link2 { 
    margin-left: 800px; 
}

Используя этот метод, позволяйте вам свободно играть со своей ссылкой и перемещать ее, как хотите.

источник

2014-01-03 00:20:02 PLATANIUM

Самый простой ответ, предоставляя вам заранее знать, сколько ссылок там будет:

footer { 
    text-align: center; 
} 

footer a:first-child { 
    float: left; 
} 

footer a:last-child { 
    float: right; 
}

JS Fiddle demo.

Это выравнивает все ссылки на центр их родительского элемента, а затем перемещает :first-child влево и :last-child справа.

источник

2014-01-03 00:20:56

псевдоклассы не работают во всех браузерах – Popnoodles

В этом примере нет псевдоэлементов. –

Еще пара вариантов:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style media="all"> 
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} 
footer { 
    height: 50px; 
    line-height: 50px; 
    background-color: #ccc; 
    text-transform: uppercase; 
    padding: 0 20px; 
} 

footer a { 
    margin: 0; 
    display: block; 
    float: left; 
    width: 33%; 
} 

.link2 {text-align: center; width: 34%;} 
.link3 {text-align: right;} 


</style> 


</head> 
<body> 

<footer> 
     <a href="#">Link1</a> 
     <a href="#" class="link2">Link2</a> 
     <a href="#" class="link3">Link3</a> 
</footer> 

</body> 
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style media="all"> 
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} 
footer { 
    height: 50px; 
    line-height: 50px; 
    background-color: #ccc; 
    text-transform: uppercase; 
    padding: 0 20px; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

footer a { 
    margin: 0; 
    display: table-cell; 
    width: 33%; 
} 

.link2 {text-align: center; width: 34%;} 
.link3 {text-align: right;} 


</style> 


</head> 
<body> 

<footer> 
     <a href="#">Link1</a> 
     <a href="#" class="link2">Link2</a> 
     <a href="#" class="link3">Link3</a> 
</footer> 

</body> 
</html>

источник

2014-01-03 00:32:13

Горизонтально центр одного из трех якорных тегов

ответ

Смежные вопросы