css: проблема с вертикальным выравниванием с отдельными блоками div

Question

Мне нужно центрировать сообщение в div, например this Родительский div имеет ширину 100%, а для горизонтального горизонтального сообщения это не проблема. Кроме того, как вы можете видеть, значок также центрирован по вертикали, но я не могу центрировать текст по вертикали. До сих пор единственным CSS я применил к этому DIV является

.content { 
    height: 100% ; 
    display: inline-block ; 
} 

Любые предложения, почему сообщение ДИВ сдвинута вниз в .container. И это правильный подход к перекрестному браузеру?

Answer 1

с минимальными изменениями в вашем DOM и CSS, и без фиксации каких-либо высота/высота линии

ad d vertical-align: middle; в .icon и заменить height:100% с vertical-align: middle; в .content

посмотреть Working Fiddle

Answer 2

Вы можете использовать что-то вроде

.parent { 
    background-color: lightgrey ; 
    width: 100% ; 
    height: 50px ; 
    text-align: center ; 
    display: inline-block; 
} 
.content { 
    height: 100%; 
    display: inline-block; 
    margin-top: -15px; //so that text lies at the center level of icon 
    vertical-align: middle; 
    } 

Answer 3

http://jsfiddle.net/sDWxN/2/

.container высоты является проблемой, и вы можете поставить .container высоты на 100%, чтобы он изменил свой родитель. После добавления vertical-align:middle; в .content.

.content { 
    height: 100% ; 
    display: inline-block ; 
    vertical-align:middle; 
} 

.container { 
    display: inline-block ; 
    height: 100% ; 
} 

Answer 4

изменить ваш CSS как этот

.content { 
height: 100% ; 
display: inline-block ; 
vertical-align:middle; 
line-height:5px; 
} 

.container { 
display: inline-block ; 
height: 100% ; 
} 

Check The Fiddle

Answer 5

это должно каким-то образом сделать трюк. http://jsfiddle.net/sDWxN/6/

в принципе, я прибавил:

Разметки

<div class="parent"> 
    <div class="container">  
    <div class="content"> 
     <div class="icon"> 
      <p class="tocenter">some message here</p> 
     </div> 
     </div> 
    </div> 
</div> 

CSS-

.icon { 
    display: inline-block ; 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/88/Red_triangle_alert_icon.png) ; 
    background-repeat: no-repeat ; 
    background-position: 0 ; 
    background-size: 8% ; 
    width: 250px ; 
    height: 100% ; 
} 
.content {  
    border:1px solid black; 
    height: 100% ;  
} 

Надеется, что это помогает

Answer 6

Another approach.

Я предпочитаю иметь сообщение и значок «связанный» в промежутке с детским пролетом. Два ключа в этом подходе:

1. Вертикально совместите контейнера DIV внутри родителя один. Использование позиции в обоих классах и margin в контейнере, вы можете достичь этого.

2. Вертикально выровнять промежуток с сообщением внутри родительских промежутка (один с иконкой, которые используют значка-сообщение класса). См. Комментарии в коде css.

Он работает в каждом браузере.

HTML

<div class="parent"> 
    <div class="container"> 
     <span class="icon-message"> 
      <span>message</span> 
     </span> 
    </div> 
</div> 

CSS

.parent { 
    background-color: lightgrey ; 
    width: 100% ; 
    height: 70px ; 
    text-align: center ; 
    position: relative; 
} 

.container { 
    position: absolute; 
    display: inline-block; 
    height: 40px ; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    border: 1px solid #000; 
} 

.icon-message { 
    background: url("http://upload.wikimedia.org/wikipedia/commons/8/88/Red_triangle_alert_icon.png") no-repeat; 
    display: inline-block; 
    background-size: 40px 40px; /* image's size */ 
    height: 40px; /* image's height */ 
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */ 
} 

.icon-message span { 
    height: 40px; /* image's height */ 
    display: table-cell; 
    vertical-align: middle; 
}