Как сохранить объекты в разделах по центру при изменении размера браузера? - PullRequest
Новая
       68

Как сохранить объекты в разделах по центру при изменении размера браузера?

1 голос
/ 14 марта 2020

Я создаю веб-сайт, разделенный на 2 столбца: один левый столбец с меню и один правый столбец с ползунком. У меня возникли некоторые проблемы с центрированием <div> в разделах.

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

Как я могу гарантировать, что мои объекты остаются идеально центрированными, когда я изменяю размер браузера?

Вот скриншот:

Screenshot

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* needed to be able to use 100% height in the columns */
  overflow: hidden;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.column {
  height: 100%;
  float: left;
}

.c20 {
  width: 20%;
  background-color: yellow;
}

.c80 {
  width: 80%;
  background-color: red;
}

header {
  height: 20%;
}

section {
  height: 60%;
}

footer {
  height: 20%;
}

header,
footer {
  background-color: rgba(200, 200, 200, 0.5);
}

section,
header,
footer {
  padding: 10px;
}


/* Menu */

.vertical-menu {
  width: 100%;
  /* Set a width if you like */
  height: 100%;
  position: static;
}

.vertical-menu a {
  color: black;
  /* Black text color */
  display: block;
  /* Make the links appear below each other */
  padding: 15px 0;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline from links */
  text-align: center;
  width: 100%;
}

.vertical-menu a:hover {
  background-color: ;
  /* Dark grey background on mouse-over */
}

.image-slider {
  position: relative;
  width: %;
  margin: 0 auto;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Simone Livraghi Photographer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div class="column c20">

    <header>Header c20</header>

    <section>
      <div class="vertical-menu">

        <a href="#">Logo</a>
        <a href="#">Home</a>
        <a href="#">Portfolio</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

      </div>
    </section>



    <footer>Footer c20</footer>

  </div>

  <div class="column c80">

    <header>Header c80</header>

    <section>



    </section>

    <footer>Footer c80</footer>

  </div>


</body>

</html>

Ответы [ 2 ]

0 голосов
/ 14 марта 2020

Может быть, добавление margin:auto к каждому элементу в вертикальном меню поможет: 

.vertical-menu a {
color: black;
display: block;
padding: 15px 0;
text-decoration: none;
text-align: center;
width: 100%;
margin: auto;
}
0 голосов
/ 14 марта 2020

вы должны задать фиксированную ширину боковой панели меню, и в какой-то момент перерыва она сместится, но теперь ее показ в идеальном положении после изменения размера также

...