Вопрос по vertical-alignment, css, html – Методы вертикального выравнивания

4

Каковы лучшие методыvertically-align что-то относительно этогоРазмеры элементов s. На данный момент яЯ знаю только оvertical-align:middle; хорошо работает внутри.

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

Ваш Ответ

5   ответов
0

со столом вы можете использовать


    
        
    

или CSS

td{
    vertical-align:middle;
}

Если вы хотите, чтобы css вертикальное выравнивание было средним для div, используйте display: table-cell; и дисплей: таблица;

#abc{
    font:Verdana, Geneva, sans-serif;
    font-size:18px;
    text-align:left;
    background-color:#0F0;
    height:50px;
    display: table;
    width: 100%;
}

#abc span {
    vertical-align:middle;
    display: table-cell;
}

ДЕМО ЗДЕСЬ

0

Отличное место для вас, чтобы начать этостатья по хитрости CSS. Это касается каждого значения, котороеvertical-align может иметь и различное использование каждого в четком сжатом виде.

Вот варианты:

vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom

И вот допустимые параметры для ячеек таблицы:

baseline (and sub, super, text-top, text-bottom, , and )
Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top
Align the top padding edge of the cell with the top of the row.
middle
Center the padding box of the cell within the row.
bottom
Align the bottom padding edge of the cell with the bottom of the row.

Кроме того, вы можете попробовать некоторые другие приемы, такие как установкаline-height равно родительскому контейнерувысота

0

Это может быть сюрпризом для вас, ноvertical-align было настолько запутанным, что вы можете запутаться в нем даже для самых маленькихdivs

Вот некоторые удивительные ресурсы, чтобы понять это:

Понимание вертикального выравнивания илиКак (не) вертикально центрировать контент

vertical-align.com

CSS трюки (я уже упоминал, я думаю)

Последний вариант

Вы должны понять, когда использовать это свойство, а когда нет => в некоторых случаях это относится только кtableВ то время как в некоторых, вы должны выбрать чистыйcss методы!

4

Вот 3 очень хороших метода для вертикального центрирования ребенка в контейнере - даже если вы неt знать высоту дочернего элемента. Первые 2 изэта статья CSS-трюки

Разметка (для всех методов):

    
    
        Some text
        

Решение № 1: метод CSS таблиц (FIDDLE)

CSS:

/* This parent can be any width and height */
.block {
  display: table;
   width: 100%;
   background: orange;
   height: 300px;
}


.centered {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background: pink;
}
Решение № 2: Псевдо ('Призрак») метод элемента (FIDDLE)

CSS:

/* This parent can be any width and height */
.block {
  text-align: center;
  background: orange;
  height: 300px;

}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}
Решение № 3: Flexbox (FIDDLE)

(Соответствующий) CSS:

.block {
   background: orange;
   height: 300px;
   display: flex;
   align-items: center;
}
хороший ответ, вы также можете предоставить решение сposition:absolute; хотя для этого нужна указанная высота:jsfiddle.net/webtiki/n2Zg2/12 web-tiki
0

Мой фаворит для модального центрирования - использовать комбинациюposition а такжеtranslate, как описано здесь:http://css-tricks.com/centering-percentage-widthheight-elements/

В итоге:

.center {
    width: 50%; /* or whatever you want your width to be; defaults to 100% */
    height: 50%; /* or whatever you want your height to be; defaults to wrapping content */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Это может или не может работать в зависимости от вашего варианта использования, но это 'Это хороший трюк в вашем наборе инструментов.

Похожие вопросы