CSS: Centering elements vertically

Question

I'm trying to develop my first responsive website but I'm having some trouble (of course).

I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me. This is what the image CSS looks like:

.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}

Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/

Appreciate any help!

Which elements are you trying to center vertically? – feitla Jul 23 '14 at 21:14 — feitla, Jul 23 '14 at 21:14

score 0 · Answer 1 · edited May 23 '17 at 10:25

You can do this by adding this css to .tablaBuscador

position: fixed;
top: 50%;
margin-top:-100px;  /* half of height */

More info here: How to center a table of the screen (vertically and horizontally)

The newer option would be to use calc() but you might run into browser support issues.

position: fixed;
top:calc(50% - 100px).

Here are which browsers support calc(): http://caniuse.com/#feat=calc

G-Cyrillus · Accepted Answer · 2014-07-23T21:21:39.277

since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO

basicly (+ below update of your CSS):

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

.tablaBuscadorElementos {
    height:22%;/* instead min-height so value can be used for pseudo or direct child */ 
    border: 1px solid black;
    padding:0px;
    width:100%;
}
.tablaBuscadorElementos > span {
    font-size:20px;
    width:80%;
    vertical-align:middle; /* align to next inline-block element or baseline*/
    border:1px solid black;
    display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
    vertical-align:middle; /* align to next inline-block element or baseline*/
    width: 20px;
    height:20px;

}

.tablaBuscador, .tablaBuscadorElementos{
    display:block;
}
.tablaBuscadorElementos:before {
    content:'';
    height:100%;/* calculated from 22% parent's height */
    display:inline-block;/* layout*/
    vertical-align:middle;/* align to next inline-block element or baseline*/
}

pseudo element can be :after, before could be used to insert your img/icon. — G-Cyrillus, Jul 23 '14 at 21:27
Great answer. After looking at it a bit I think this is exactly what I was looking for. — NewbieCoder, Jul 24 '14 at 00:43
Follow up question, I'm having some trouble replicating what you did. I'm not sure I get your method. Here is a similar Fiddle: http://jsfiddle.net/mampy3000/zK4hS/ I want to replicate the vertical alignment in the grey div in the top (the one with a button and some text). Can you help me understand what I did wrong there? Thanks a lot! — NewbieCoder, Jul 24 '14 at 20:31

score 0 · Answer 3 · answered Jul 23 '14 at 21:23

Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.

And here's a tuned up code:

* {
    padding: 0;
    margin: 0;
}

body {
    height:100%;
}

.tablaBuscador {
    font-family: "Maven Pro", sans-serif;
    height:200px;
    width:40%;
}

.tablaBuscador > div {
    border: 1px solid black;
    padding: 10px 0;
}

.tablaBuscador > div > span {
    font-size:20px;
    width:80%;
    border:1px solid black;
}

.tablaBuscador > div > img {
    width: 20px;
    height: 20px;
}

.tablaBuscador > div > * {
    display: inline-block;
    vertical-align: middle;
}

CSS: Centering elements vertically

3 Answers3