CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29109

css: vertical align issue with inline-block divs

I need to center a message in a div, like this The parent div has a width of 100%, and to center the message horizontally is no problem. Also, as you can see, the icon is also centered vertically, but I cannot center the text vertically. So far, the only css I've applied to that div is

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

Any suggestions why the message div is shifted downwards in the .container. And is this the right cross browser approach ?

Upvotes: 1

Views: 815

Answers (6)

lluisaznar
lluisaznar

Reputation: 2393

Another approach.

I prefer to have the message and the icon 'related' in a span with a child span. Two keys in this approach:

  1. Vertically align the container div inside the parent one. Using position in both classes, and margin in container, you can achieve that.

  2. Vertically align the span with the message inside the parent span (the one with the icon, which use the icon-message class). See the comments in the css code.

It works in every browser.

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;
}

Upvotes: 1

theLibertine
theLibertine

Reputation: 175

this should somehow do the trick. http://jsfiddle.net/sDWxN/6/

basically, I added this:

The markup

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

The 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% ;    
}

Hope this helps

Upvotes: 1

avrahamcool
avrahamcool

Reputation: 14094

with minimum changes to your DOM and CSS, and without fixing any height / line-height

add vertical-align: middle; to .icon and replace height:100% with vertical-align: middle; in .content

see this Working Fiddle

Upvotes: 1

asok Buzz
asok Buzz

Reputation: 1894

You can use something like

.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;
  }

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

change your css like this

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

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

Check The Fiddle

Upvotes: 2

Donovan Charpin
Donovan Charpin

Reputation: 3397

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

The .container height is a problem and you can put the .container height at 100% to make it adjusted to its parent. After add vertical-align:middle; to the .content.

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

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

Upvotes: 1

Related Questions