Выравнивание элемента заголовка на странице html

Я пытаюсь выровнять элемент заголовка, но не могу выровнять его так, как хочу. Я попытался вывести университет Бентаукура прямо под UOB в блоке заголовка, но либо он сближается с UOB, либо намного ниже него. Может кто подскажет где делаю не так.

Это мой код.

<!DOCTYPE html>
<html lang = "en">

<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f1f1;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    a,
    a:hover {
      text-decoration: none;
      float: left;
      font-family: Impact, Charcoal, sans-serif;
    }
    
    #home,
    #phone {
      float: right;
    }
    
    #headname {
      float: left;
      font-family: "Comic Sans MS", cursive, sans-serif;
    }
    
    #home {
      padding-right: 10px;
    }
    
    #king {
      padding-left: 10px;
    }
    
    .head {
      background-color: #174e80;
    }
  </style>
</head>

<body>

  <header class = "w3-container head">
    <h2>
      <a id = "gly" href = "kuchbhi.html" style = "color:#f2f2f2">
        <span style = "float:left;">UOB</span>
        <p style = "float:left;" id = "king"><span class = "glyphicon glyphicon-education"></span></p>

      </a>

      <p id = "phone" style = "padding-right:30px;padding-top:10px;color:#f2f2f2"><span class = "glyphicon glyphicon-earphone"></span></p>
      <p id = "home" style = "padding-right:30px;padding-top:10px;color:#f2f2f2"><span class = "glyphicon glyphicon-home"></span></p>
    </h2>
    <br>
    <br>
    <p id = "headname" style = "font-size:12px; padding-left:6px;color:#f2f2f2">University of Bentaucur</p>

    <br>

  </header>

</body>

</html>

В элементе заголовка мне нужно получить элемент <p> University of Bangalore под линией UOB.

Элемент <p> оставляет место в начале строки

у вас встроенные стили ... см. padding-left:6px на headname

— 15.09.2018 13:21

Это не помогает. Тем не менее, это так же

— 15.09.2018 13:38

html twitter-bootstrap css alignment

15.09.2018 13:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если вы добавите clear: left; к рассматриваемому <p>, требуемый текст не будет отображаться на странице, пока не будут удалены все элементы, которые обычно появляются слева от <p>.

<p id = "headname" style = "font-size:12px; padding-left:6px;color:#f2f2f2; clear:left;">University of Bentaucur</p>

15.09.2018 22:58

попробуйте изменить значение padding-left с 6px на 3px -

<p id = "headname" style = "font-size:12px; padding-left:3px;color:#f2f2f2">University of Bentaucur</p>

15.09.2018 23:06

Другие вопросы по теме

ITCSS - где помещаются классы, специфичные для страницы

Bootstrap 4 сочетает в себе складные и неразборные элементы навигации

Большой стол не подходит под размер окна в Bootstrap 4

Показать и скрыть один div, добавить время при нажатии кнопки, используя проблему css

Bootstrap не загружается на angular 6

JQuery: воспроизведение видео в слайдере начальной загрузки

React - запретить onClick запускать событие начальной загрузки родителя

Bootstrap Video Modal не отображается с плагином plyr

Как я могу настроить размер шрифта текста всплывающей подсказки начальной загрузки?

Позиционирование кнопок Navbar с Bootstrap 4 и Flexbox не работает?

Выравнивание элемента заголовка на странице html

Ответы 2

Другие вопросы по теме

Похожие вопросы