Question

I have 2 div: one parent and one child. User can add this div with button click and they set the text value. I want to display these dives in border inline-block(3 items in 1 row, like new tabs in chrome). And I want to display this text in the center of border.
There is css code:

.parentDiv {
    width: 300px;
    height: 200px;
    margin: 5px;
    border: solid 1px black;
    display: inline-block;
    font-size: 24px;
}
.childDiv {
    text-align: center;
    vertical-align:middle;
}

Answer 1

Here’s a jsfiddle to show you a solution: http://jsfiddle.net/nfLu3/

.parentDiv {
    ...
    line-height:200px;
    text-align:center;
}

.childDiv {
    display:inline-block;
    line-height:1;
}​

the keys are:

• set the line-height of the parent container to its height (200px) and the text-align to center. So some text appears exactly in the middle of your box.
• set the child container to be display as inline-block. In this way it’s oriented at the text around (it’s important!). The text around (I mean the line breaks and spaces before the child container) has a line-height of 200px and the child block has vertical-align:middle, so it will be centered.

there you go