Вопросы Теги

выравнивание по вертикали с Bootstrap 3

Основная причина заключается в том, что numpy transpose создает только представление, которое не влияет на базовое хранилище массива, и именно это хранилище, которое PyCUDA напрямую обращается, когда копия выполняется в память устройства. Решение заключается в использовании метода copy при выполнении транспонирования, который создаст массив с данными в транспонированном порядке в памяти хоста, а затем скопирует его на устройство: 

data_gpu = gpuarray.to_gpu(data.T.copy())
846
задан Hashem Qolami 26 November 2015 в 04:55
поделиться

6 ответов

Этот ответ представляет собой взлом, но я настоятельно рекомендую вам использовать flexbox (как указано в @Haschem answer ), поскольку теперь он поддерживается везде.

Демонстрационная ссылка:
- Bootstrap 3
- Bootstrap 4 alpha 6

Вы по-прежнему можете использовать пользовательский класс, когда вам это необходимо: 

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

Использование inline-block добавляет дополнительное пространство между блоками, если вы разрешаете в своем коде реальное пространство (например, ...</div> </div>...) , Этот дополнительный пробел нарушает нашу сетку, если размеры столбцов составляют до 12: 

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Здесь у нас есть дополнительные пробелы между <div class="[...] col-lg-2"> и <div class="[...] col-lg-10"> (возврат каретки и 2 табуляции / 8 пробелов) , И так ...

Enter image description here

Давайте выберем этот лишний пробел !! 

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Enter image description here

Обратите внимание на , казалось бы, бесполезные комментарии <!-- ... -->? Они важны - без них пробел между элементами <div> будет занимать пространство в макете, нарушая систему сетки.

Примечание: Bootply был обновлен

904
ответ дан Dave Jarvis 26 November 2015 в 04:55
поделиться

HTML 

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS 

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}
0
ответ дан Pacific P. Regmi 26 November 2015 в 04:55
поделиться

Есть несколько способов сделать это:

  1. Использование & nbsp; 

    display: table-cell;
vertical-align: middle;

    и CSS контейнера для 

    display: table;

  2. Используйте заполнение вместе с медиа-экраном для изменения заполнения относительно размера экрана. Google @media, чтобы узнать больше.

  3. Использовать относительное заполнение

    Т.е., указать заполнение в терминах%

1
ответ дан Peter Mortensen 26 November 2015 в 04:55
поделиться

Я действительно считаю, что следующий код работает с использованием Chrome, а не других браузеров, кроме выбранного в данный момент ответа: 

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply Link

Возможно, вам придется изменить высоты (в частности, на .v-center) и удалите / измените div на div[class*='col-'] для ваших нужд.

10
ответ дан Peter Mortensen 26 November 2015 в 04:55
поделиться
1110 Я столкнулся с этой же проблемой. В моем случае я не знал высоту внешнего контейнера, но вот как я это исправил:

Сначала установите высоту для ваших элементов html и body, чтобы они составляли 100%. Это важно! Без этого элементы html и body будут просто наследовать рост своих детей. 

html, body {
   height: 100%;
}

Тогда у меня был внешний контейнерный класс с: 

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

И, наконец, внутренний контейнер с классом: 

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML так же прост, как: 

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Это все, что вам нужно для вертикального выравнивания содержимого. Проверьте это в скрипке:

Jsfiddle

8
ответ дан Peter Mortensen 26 November 2015 в 04:55
поделиться

Обновление 2018

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

Важно! Вертикальный центр относительно высоты родительского

Если Родитель элемента, который вы пытаетесь отцентрировать, не имеет высоты , ни один из решений вертикального центрирования не будет работать!

Bootstrap 4 ]

Теперь, когда Bootstrap 4 является flexbox по умолчанию , существует много различных подходов к вертикальному выравниванию с использованием: auto-margins , flexbox utils , или дисплей использует вместе с вертикальное выравнивание использует . Сначала «использование вертикального выравнивания» кажется очевидным, но эти только работают с элементами отображения inline и table. Вот несколько вариантов вертикальной центровки Bootstrap 4.

1 - Вертикальный центр с использованием автоматических полей:

Другой способ вертикального центра - использовать my-auto. Это будет центрировать элемент внутри его контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12. 

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4 - вертикальный центр с использованием авто-полей Демо

my-auto представляет поля по вертикальной оси Y и эквивалентно: 

margin-top: auto;
margin-bottom: auto;
<час>

2 - Вертикальный центр с Flexbox:

Vertical center grid columns [1142]

С Bootstrap 4 .row теперь display:flex, вы можете просто использовать align-self-center в любом столбце для его вертикального центрирования ... 

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-center на всем .row, чтобы выровнять по центру по вертикали все col-* в ряду ... 

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4 - столбцы с разной высотой вертикального центра Демонстрация

3 - вертикальный центр с использованием утилит дисплея:

Bootstrap 4 имеет утилиты отображения , которые можно использовать для display:table, display:table-cell, display:inline и т. Д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания элементов ячеек inline, inline-block или table. 

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4 - вертикальный центр с использованием утилит дисплея Демонстрация

Также см .: Вертикальный центр выравнивания в Bootstrap 4 ]

Bootstrap 3

Метод Flexbox на контейнере элемента (ов) по центру: 

.display-flex-center {
    display: flex;
    align-items: center;
}

Метод Transform TranslateY: 

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Отображение встроенного метода: 

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Демонстрация методов центрирования Bootstrap 3

22
ответ дан Peter Mortensen 26 November 2015 в 04:55
поделиться