Содержание центра вертикально в ионном?

Я хочу, чтобы иметь возможность центрирования практически все, по вертикали на экране:Содержание центра вертикально в ионном?

Например

Формы
Кнопки

Возможно ли это сделать с некоторым пользовательской CSS классом?

Сейчас я пользуюсь приведенным ниже кодом. Он работает, но не очень хорош, когда я выбираю, в каком проценте будет запускаться контент. Поэтому мне нужна одна из них для каждой страницы, и если контент становится дольше, мне нужно изменить процент.

.loginForm .scroll { 
    height: 100%; 
} 
.loginForm .loginForm-wrapper { 
    position: absolute; 
    top: 30%; 
    left: 0; 
    right: 0; 
}

источник

2015-11-23 user1283776

Существуют различные способы централизованного содержания по вертикали. Я часто использую путь к transform им. Допустим, у вас есть контейнер, в котором другой элемент должен быть центрирован.

.container { 
 
    position: relative; /* required */ 
 

 
    height: 150px; 
 
    width: 100px; 
 
    background: #efefef; 
 
    text-align: center; 
 
    border-radius: 4px; 
 
} 
 
.center-me { 
 
    display: block; 
 
    font-family: Consolas; 
 
    font-size: 12px; 
 
    padding: 5px 10px; 
 
    background: #000; 
 
    color: #fff; 
 
    border-radius: 4px; 
 

 
    position: absolute; /* required */ 
 
    top: 50%; /* required */ 
 
    left: 50%; 
 
    transform: 
 
    translateY(-50%) /* required */ 
 
    translateX(-50%); 
 
}

<div class="container"> 
 
    <div class="center-me"> 
 
    center 
 
    </div> 
 
</div>

источник

2015-11-23 14:31:57

Это не работает для моего кода. Я пробовал как со всеми полями, так и с обязательными полями. В результате контент оказался сжатым в верхнем левом углу. Вот мой HTML, чтобы вы могли увидеть, что я сделал не так: http://codepen.io/anon/pen/PPvqgq – user1283776

Вот последний CSS, который я пробовал: .container { позиция: relative;/* required */ высота: 100%; } .center-me { дисплей: блок; позиция: абсолютная;/* required */ верх: 50%;/* required */ переводY (-50%)/* обязательно */ } – user1283776

Вы могли бы сделать что-то с немного JS, хотя я думаю, что ответ @Jan ДГООНА является достаточным.

calcMiddle = function() { 
 
    var middleObject = document.querySelector('#middle'), 
 
     middleHeight = middleObject.clientHeight/2, 
 
     middleWindow = window.innerHeight/2, 
 
     middleMargin = middleWindow - middleHeight; 
 
    middleObject.style.marginTop = middleMargin + "px"; 
 
}; 
 

 
calcMiddle();

body { 
 
    margin: 0; 
 
} 
 
#middle { 
 
    padding: 10px; 
 
    background: #abcabc; 
 
}

<body onresize="calcMiddle();"> 
 
    <div id="middle"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu sed neque volutpat lacinia mattis vitae nulla. Mauris in rutrum dui. Nullam nec dui rhoncus diam aliquam molestie. Nullam volutpat odio dignissim lorem ornare luctus. Aenean iaculis lectus venenatis aliquam porttitor. Etiam facilisis libero nec risus blandit aliquam. Donec sed ipsum nibh. Vestibulum sit amet accumsan ipsum. Maecenas viverra auctor orci, et scelerisque enim congue et.</p> 
 
    </div> 
 
</body>

Пример:

http://jsfiddle.net/link2twenty/y7h60kr7/

источник

2015-11-23 15:02:09

У вас нет j JavaScript для этого. Вы можете использовать простой CSS – Zorgatone

Содержание центра вертикально в ионном?

ответ

Смежные вопросы