Что делать, если "div" мешает работе "p"?

Question

Мне нужно выровнять текст по центу, но "div" мешает "p" и в css text-align не работает. Что можно с этим сделать?

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Proba</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript">
        (function() {
          var preload = document.getElementById("preloader");
          var loading = 0;
          var id = setInterval(frame, 64);

      function frame() {
            if (loading == 100) {
      clearInterval(id);
            } else {
          loading = loading + 1;
          if (loading == 90) {
        preload.style.opacity = "0";
      }
    }
  }
})();
  </script>

</head>
<body bgcolor="purple" margin="0" padding="0">

<div class="container">
    <div class="panel">
        <p id="onthepanel1">
            <a href="#Global">Global</a>
        </p>
    </div>
</div>

</body>
</html>

css

body{
    margin: 0;
    padding: 0;
}

.container{
    max-width: 1600px;
    margin: 0 auto;
 }

.panel {
    overflow: hidden;
    background-color: #333;
    position: relative;
    margin: 0;
    padding: 0;
}
  
.panel a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: 2s;
}
  
.panel a:hover {
    background-color: rgb(88, 88, 88);
    color: black;
    transition: 2s;
}
  
.panel a.active {
    background-color: #4CAF50;
    color: white;
}

#onthepanel1 {
    text-align: center;
}

Answer 1

используй <span> вместо <div>. <div> - блочный, а <span> - строчный элементы. Поэтому <div> формирует блок из того, что в нем располагается с новой строки, а <span> не переносит элементы, размещая их в строку. Так же стоит отметь, что согласно рекомендациям w3c линейный тег не может включать в себя блочные теги, поэтому <div> обычно используется для разметки блоков, а <span> - отрывков текста.

Answer 2

Ты хочешь чтоб элементы в теге <p> были посередине? Убери у тега <а> свойство float: left и все будет работать.

БЛОГ НА HUSL

Что делать, если "div" мешает работе "p"?

Ответы (2 шт):