Центральный элемент между другим элементом и левой частью экрана (html / css)

ProgramBox

Центральный элемент между другим элементом и левой частью экрана (html / css)

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я хочу центрировать div между левой частью экрана и правым плавающим div. Я хочу добиться именно того, что margin:auto; обычно делает, к сожалению margin:auto; , не работает, когда каким-то образом задействованы плавающие элементы.

левый элемент (который должен быть центрирован):

 .wcard{
  float: left;
  /* margin:auto; */
  background-color: white;
  border-collapse: separate;
  padding: 35px;
  padding-bottom: 5px;
  box-shadow: 0 0 6px #b2b2b2;
}

правый элемент:

 .slidein ul {
  float: right;
  padding: 4px 0;
  overflow: hidden;
  list-style: none;
}

HTML:

    <body>
    <header>
        <img id = "menu" src="static/images/menunav.png">
    </header>
    <div class="wcard">
    </div>
    <div class="slidein">
        <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Techniques</li>
            <li>About me</li>
            <li></li>
        </ul>
    </div>
  </body>

Визуальное представление того, чего я хочу достичь:

Ответ №1:

Вот именно то, чего вы хотите достичь идея создания большого контейнера, затем разделить его на два, а затем margin:auto поместить div внутри того, который вам нужен

   html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  header {
    width: 100%;
    height: 70px;
    background: tomato;
  }
  .container {
    width: 100%;
    height: calc(100% - 70px)
  }
  .left{
    float: left;
    background: red;
    width: 80%;
    height: 100%;
  }
  .right{
    float: left;
    background: yellow;
    width: 20%;
    height: 100%;
  }
  .centered {
    width: 100px;
    height: 100px;
    background: black;
    margin: 0 auto;
  }

 <header></header>
  <div class="container">
    <div class="left">
    <div class="centered"></div>
    </div>
    <div class="right">

    </div>
  </div>

Развернуть фрагмент кода

Ответ №2:

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

Это для плавающего левого изображения:

 #left{
  width:50%;
  margin-left:20%;
  margin-top:10%;
}

Все это можно увидеть в этой скрипке JS: решение # 1

1. Спасибо за ответ, он отлично работает, если левый div статичен, но дело в том, что когда правый div скользит справа (это будет слайд в меню), левому div необходимо отрегулировать его горизонтальное положение. Вот почему мне нужно что-то вроде margin: auto; , но между левой частью экрана и правым плавающим элементом.

2. Извините, если ваш ответ не помог, я нахожу ваше объяснение немного запутанным.

3. @Bonbin вы можете увидеть мой ответ?

Ответ №3:

 .wcard{
  /* margin:auto; */
  display: inline-block;
  background-color: white;
  border-collapse: separate;
  padding: 35px;
  padding-bottom: 5px;
  box-shadow: 0 0 6px #b2b2b2;
  margin: auto;
}


.slidein ul {
  padding: 4px 0;
  overflow: hidden;
  list-style: none;
  text-align: right;
}


main {
  float: left;
  width: 80%;
  text-align: center;
}

nav {
  float: right;
  width: 20%;
}

 <body>
    <header>
        <img id = "menu" src="static/images/menunav.png">
    </header>
  
    <main>
      <div class="wcard">
        this should be centered
      </div>
    </main>
  
    <nav class="slidein">
      <ul>
          <li>Home</li>
          <li>Projects</li>
          <li>Techniques</li>
          <li>About me</li>
          <li></li>
      </ul>
    </nav>
  </body>

Развернуть фрагмент

Ответ №4:

Чтобы «центрировать» .wcard , добавьте:

 margin-top: calc(25vh - 40px);
margin-left: calc(50vw - 70px);

Если он находится не в нужном вам положении, вы можете легко расположить .wcard его, отрегулировав поля. Обратите внимание, что vw и vh используются для того, чтобы сделать его отзывчивым. Подробности прокомментированы в сниппете

ФРАГМЕНТ ТЕКСТА

 /* This is just for help us visualize where each element is */

* {
  outline: 1px solid black;
}
/* border-collapse is a table property */

.wcard {
  float: left;
  /* margin:auto; */
  background-color: white;
  /*border-collapse: separate;*/
  padding: 35px;
  padding-bottom: 5px;
  box-shadow: 0 0 6px #b2b2b2;
  /* Using margins and calc to determine offset */
  margin-top: calc(25vh - 40px);
  margin-left: calc(50vw - 70px);
}
.slidein {
  float: right;
  padding: 4px 0;
  overflow: hidden;
  list-style: none;
}

 <body>
  <header>
    <img id="menu" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width='50'>
  </header>

  <div class="wcard">wCard
  </div>
  <!-- Removed the outer div as it seems unnecessary -->
  <ul class="slidein">
    <li>Home</li>
    <li>Projects</li>
    <li>Techniques</li>
    <li>About me</li>
    <li></li>
  </ul>

</body>

Развернуть фрагмент

1. спасибо за явный ответ, но я уже принял другой! Тем не менее, вы получили преимущество: D

2. Добро пожаловать, сэр. Вы также получили преимущество, счастливого кодирования.:)

Метки: Центральный элемент между другим элементом и левой частью экрана (html / css)