CODEWITHSUNDEEP
css
user1822824
user1822824

Reputation: 2488

Center Image Vertically Within Div That Is Floated Left

This is for a mobile website header. The page title is centered and the back button image floats left. I want the back button to be centered within the pageTitle div but cannot get it to work.

I found that if I give the pageTitle div a position of relative and backArrow a top of 0 I can get around the padding of the pageTitle div but I can't get any further. Giving a top or padding of 50% only made it worse.

Fiddle: http://jsfiddle.net/gjL4z/

CSS:

body {
    background-color: #666;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.pageTitle {
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
    position: relative;
}
.backArrow {
    float: left;    
    position:absolute; 
    top: 0;  
}

HTML:

<div class="pageTitle">
    <div class="backArrow">
        <a href="index.php">
            <img src="http://s27.postimg.org/5iv71nvkf/backward_Arrow.png" width="29" height="29" />
        </a>
    </div>
    Page Title
</div>

Upvotes: 0

Views: 54

Answers (3)

suneetha
suneetha

Reputation: 827

Change .backArrow css properties, instead use

   .backArrow { 
      top: 0;
      width: 29px;
      height:29px;
      float: left;      
    }
    .backArrow a {
      width:100%;
      height:100%;
      display: table;
    }
    .backArrow a img {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

JS Fiddle : http://jsfiddle.net/gjL4z/16/

Upvotes: 0

Andrei
Andrei

Reputation: 3106

You can do it like this:

http://jsfiddle.net/gjL4z/6/

.backArrow {
    float: left;    
    position:absolute;
    height:100%;
    top:0;
}
.backArrow a{
    display: block;
    height:100%;
    text-align: center;
    font: 0/0 a;
}

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

.backArrow a img{
    vertical-align: middle;
    display: inline-block;
}

This is based on the idea that 2 inline-block elements can be vertically aligned using vertical-align: middle.

What we do here is:

  • we make the a element a display:block with height set to 100% so the below added elements would take the full height of the bar.

  • we create an inline-block pseudo-element as the first child of the parent, and set its height to 100%.

  • we add vertical-align: middle that keeps the inline(-block) elements at the vertical middle of the container. We add that CSS to the added pseudo-element and our element (the image) both.

  • we set the font size of the parent to zero by font-size: 0;, in order to remove the white space character between inline(-block) elements.

This method is cross-browser and responsive

Upvotes: 1

Orahmax
Orahmax

Reputation: 2341

JSFIDDLE

Make these changes in ur code - add table-cell to parent, inline-block to child and no need of positioning. you can use suitable width.

.pageTitle {
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
    display: table-cell;
    width: 1000px;
}

.backArrow {
    display:inline-block;
    width: 10%;
    float:left;
}

Upvotes: 0

Related Questions