Правильное выравнивание для заголовка моей страницы

Question

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

В любом случае ... У меня есть страница, на которой мне нужно отобразить заголовок с двумя ссылками по обе стороны от него, и мне нужно, чтобы заголовок был отцентрирован и использовал другой шрифт / стиль, чем ссылки.

Это настройка, которая у меня есть на данный момент, не обращайте внимания на тот факт, что у меня пока есть только 1 ссылка ... Мне нужно сначала разработать первую, а потом беспокоиться о другой

<div style="float:left clear:none width:100%">
<div style="width:20%"><a href="/queryReport.action?currentFacility=<s:property value="previousFacility"/>">Previous Facility</a></div>
<div style="width:20%" class="important-center">Facility <s:property value="currentFacility"/></div>
</div>

.important-center {
    font-size:20px;
    letter-spacing:1px;         
    text-align: center;
    position:center;
    padding: 6px;
    color: #314457;
}

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

Answer 1

Если вы хотите, чтобы ссылки соседствовали с заголовком, используйте это

<div style="text-align: center;">
    <a href="#">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#">Next Facility</a>
</div>

Если вы хотите, чтобы ссылки придерживались сторон, используйте этот

<div style="text-align: center;">
    <a href="#" style="float: left;">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#" style="float: right;">Next Facility</a>
</div>

CSS

.important-center {
    font-size:20px;
    letter-spacing:1px; 
    padding: 6px;
    color: #314457;
}

Посмотреть здесь .

Answer 2

Вы пробовали использовать ul? Это должно дать вам желаемый результат.

Что-то вроде:

<div style="float:left; clear:none; width:100%;">
<ul>
  <li><a href="/queryReport.action?currentFacility=<s:property alue="previousFacility"/>">Previous Facility</a></li>
  <li class="important-center">Facility <s:property value="currentFacility"/></li>
  <li><a href="/queryReport.action?currentFacility=<s:property alue="nextFacility"/>">NextFacility</a></li>
</ul>
</div>

#navigation { margin: 0px; padding: 0px; list-style: none; }
#navigation li { padding: 2px; }

Редактировать: я думаю, что melhosseiny имеет лучшее решение.