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

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

Я пытался:

  <a href="#" onclick="location.href='http//www.google.com'; return false;"><p style="text-align:center">Search</a>

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

 <a href="#" onclick="location.href='http//www.google.com'; return false;"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p>

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

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

Ответы

Ответ 1

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

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

next: 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" здесь.

Ответ 2

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

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

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

Ответ 3

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

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

sample: http://jsfiddle.net/X8HM4/1/

Ответ 4

<p> появится на новой строке. Попробуйте обернуть все ваши ссылки в один единственный <p> тег:

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

Ответ 5

Одним из решений является размещение их внутри <center>, например:

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

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

Ответ 6

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

<main>
<nav>
<ul><li><a href="#" onclick="location.href='http//www.google.com'; return false;">search</a>
<li><a href="#" onclick="location.href='http//www.google.com'; return false;">search</a>
<li><a href="#" onclick="location.href='http//www.google.com'; return false;">search</a>

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

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