Как центрировать ссылки в HTML - PullRequest
Новая
       18

Как центрировать ссылки в HTML

16 голосов
/ 29 ноября 2010

Я действительно новичок в HTML, и мне было интересно, как вы центрируете несколько ссылок с помощью HTML?

Я пытался: 

  <a href="http//www.google.com"><p style="text-align:center">Search</a>

Но проблема в том, когда я пытаюсь поставить другиессылки за ним, например: 

 <a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p>

Он просто размещает их на отдельных строках.Я полагаю, что это происходит из-за функции <p> ... но я знаю только HTML, я знаю, что вы можете сделать это в CSS, но мне было интересно, можно ли это сделать, используя только HTML.

Спасибо залюбая помощь!

Ответы [ 6 ]

27 голосов
/ 29 ноября 2010

в вашем коде есть некоторые ошибки - первое: вы не закрыли вас p -tag: 

<a href="http//www.google.com"><p style="text-align:center">Search</p></a>

следующее: p означает «абзац» и является блок-элемент (поэтому он вызывает разрыв строки).то, что вы хотели использовать, это span, который является просто встроенным элементом для форматирования: 

<a href="http//www.google.com"><span style="text-align:center">Search</span></a>

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

<a href="http//www.google.com" style="text-align:center">Search</a>

, в конце концов, это будет, по крайней мере, правильный HTML, но все же не совсем то, что вы хотите, потому что text-align:center центрирует текст в этом элементе , поэтому вы должны установить это для элемента, который содержит этой ссылки (этот фрагмент HTML не опубликован, поэтому я не могу исправить вас, но я надеюсь, что вы понимаете) - чтобы показатьэто, я буду использовать простой div: 

<div style="text-align:center">    
  <a href="http//www.google.com">Search</a>
  <!-- more links here -->
</div>

РЕДАКТИРОВАТЬ: еще несколько дополнений к вашему вопросу:

  • p не«функция», но вы правы, это вызывает проблему (потому что это блочный элемент)
  • то, что вы пытаетесь использовать это css - вместо этого он просто встроенныйбыть помещенным в отдельный файл, но вы не делаете «просто HTML» здесь
4 голосов
/ 29 ноября 2010

Поскольку у вас есть список ссылок, вы должны пометить их как список (а не как абзацы).

Listamatic имеет кучу примеров того, как вы можете оформлять списки ссылок, включая число, представляющее собой вертикальные списки, в которых каждая ссылка центрирована (то есть то, что вы видите после).Он также имеет учебник, который объясняет принципы .

Эта часть стиля, по сути, сводится к «Задать text-align: center для элемента, который отображается как блок, содержащий текст ссылки» (это может быть сам якорь (если вы сделаете так, чтобы он отображался какблок) или элемент списка, содержащий его.

2 голосов
/ 29 ноября 2010

появится в новой строке.Попробуйте обернуть все свои ссылки в один тег

: 

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
2 голосов
/ 29 ноября 2010

вы бы поместили их в <p> или <div>

<p style="text-align:center">
    <a href="http//www.google.com">Search</a> 
    <a href="Contact Us">Contact Us</a>
</p>

образец: http://jsfiddle.net/X8HM4/1/

0 голосов
/ 29 апреля 2016

Одно из решений - поместить их внутрь <center>, например: 

<center>
<a href="http//www.google.com">Search</a>
<a href="Contact Us">Contact Us</a>
</center>

Я также создал jsfiddle для вас: https://jsfiddle.net/9acgLf8e/

0 голосов
/ 06 октября 2015

Попробуйте создать элемент nav с элементом ul.У моего есть main выше, но я не думаю, что вам это нужно. 

<main>
<nav>
<ul><li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>

Код примерно такой.вам нужно заполнить пробел,
, затем отцентрировать его. 

main
nav
ul> li> a>: href="link of choice":name of link:/a>
...