Как выровнять набор div вправо?

Как переместить блок div в а) центр и б) вправо? То есть я хочу переместить innerWrap и его содержимое либо в центр, либо вправо.

.smallW {
  width: 10%;
  height: 100px;
  background-color: green;
  float: left;
}

.largeW {
  width: 50%;
  height: 100px;
  background-color: blue;
  float: left;
}

.outerWrap {
  position: relative;
}

.innerWrap {
  background-color: yellow;
  width: 100%;
}

<div class = "outerWrap">
  <div class = "innerWrap">
    &nbsp;
    <div class = "smallW"></div>
    <div class = "largeW"></div>
    <div class = "smallW"></div>
  </div>
</div>

Скрипка здесь

Спасибо всем, кто ответил на него, но я могу принять только один. Все ответы, предоставленные до сих пор, используют flex, интересно, как это было бы сделано за несколько дней до flex...

— 07.06.2019 07:41

первое правило для центра: никогда не используйте float. Самый простой способ, чем flexbox, - это рассмотреть встроенный блок, а затем просто настроить выравнивание текста.

— 07.06.2019 10:44

html css css-float

07.06.2019 07:21

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

893

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

Ответы 4

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

.innerWrap{
 display: flex;
 flex-direction: row
 justify-content: center
}

вы можете использовать ниже для выравнивания по правому краю

justify-content: flex-end

Спасибо, ваш ответ был первым, и он работает, поэтому я его принимаю. Меня смутил центр (flex-end). Так что для тех, кому нужен этот ответ, вы должны написать его отдельно как justify-content: center ИЛИ justify-content: flex-end.

— 07.06.2019 07:39

07.06.2019 07:28

Попробуйте использовать display: flex для этого. Гораздо проще выполнить выравнивание, чем с помощью float.

Используя flex, вы можете выровнять внутренние элементы по центру, используя justify-content: center;, или по концу контейнера, используя justify-content: flex-end;, поэтому вам не нужно использовать свойство float. Это пример кода. Надеюсь, это поможет вам.

HTML

<div class = "outerWrap">
  <div class = "innerWrap">
    <div class = "smallW"></div>
    <div class = "largeW"></div>
    <div class = "smallW"></div>
  </div>
</div>

CSS

.smallW {
  width: 10%;
  height: 100px;
  background-color: green;
}

.largeW {
  width: 50%;
  height: 100px;
  background-color: blue;
}

.outerWrap {
  display: flex;
}

.innerWrap {
  background-color: yellow;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;/* For center align */
  /* justify-content: flex-end;  */ /* Align to end */
}

Ссылка на скрипт JS: https://jsfiddle.net/SJ_KIllshot/o7e4cjdL/

07.06.2019 07:31

Вы можете выровнять содержимое, используя flexbox в innerWrap

.innerWrap.center {
    display: flex;
    justify-content: center;
}
.innerWrap.right {
    display: flex;
    justify-content: flex-end;
}

СКРИПКА

.smallW {
    width: 10%;
    height: 100px;
    background-color: green;
    float:left;
}

.largeW {
    width: 50%;
    height: 100px;
    background-color:blue;
    float:left;
}


.outerWrap {
  position:relative;
}

.innerWrap {
  background-color:yellow;
  width:100%;
}

/* additional styles */
.innerWrap.center {
    display: flex;
    justify-content: center;
}
.innerWrap.right {
    display: flex;
    justify-content: flex-end;
}

<div class = "outerWrap">
    <div class = "innerWrap center">
        &nbsp;
        <div class = "smallW"></div>
        <div class = "largeW"></div>
        <div class = "smallW"></div>
    </div>
    
    <br>
    
    <div class = "innerWrap right">
        &nbsp;
        <div class = "smallW"></div>
        <div class = "largeW"></div>
        <div class = "smallW"></div>
    </div>
</div>

07.06.2019 07:32

.smallW {
    flex-basis: 10%;
    background-color: green;  
}

.largeW {
    flex-basis: 50%; 
    background-color:blue;  
}

.innerWrap {
  background-color:yellow;
  display:flex;
  justify-content:flex-end;
  height:100px;
}

<div class = "outerWrap">
    <div class = "innerWrap">
        &nbsp;
        <div class = "smallW"></div>
        <div class = "largeW"></div>
        <div class = "smallW"></div>
    </div>
</div>

Используйте Flex вместо float.

07.06.2019 07:37