Center Image Vertically Within Div That Is Floated Left

Question

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>

See this answer based on CSSTricks solution : http://stackoverflow.com/a/21919578/1491212 — Armel Larcier, May 02 '14 at 06:39

Andrei · Accepted Answer · 2014-05-02T06:40:08.967

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

suneetha · Answer 2 · 2014-05-02T06:55:25.557

0

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/

edited May 02 '14 at 06:55

answered May 02 '14 at 06:20

suneetha

827
1
6
14

That is not what the OP wanted at all, he means vertical centering not horizontal. – Andrei May 02 '14 at 06:23
That does not look vertically centered in the `10px` size. – Andrei May 02 '14 at 06:44
I think, the problem is with padding – suneetha May 02 '14 at 06:50
he is not giving height css to any element, up to my knowledge – suneetha May 02 '14 at 06:58

score 0 · Answer 3 · answered May 02 '14 at 06:39

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

Center Image Vertically Within Div That Is Floated Left

3 Answers3

JSFIDDLE