How can I center data inside parent div?

Question

I have a div that has text and images inside, it's 190px x 190px and I would like to have everything vertically centered.

I've tried looking on SO and Google and can't seem to find just a simple answer to do so.

What's the simplest way of doing this?

Fiddle

HTML:

<div class="block">
   <h2>TITLE</h2><br/>
      <img src="...." width="190px"/>
         <p>Hello world</p>
</div>

CSS:

.block {
    position:relative;
    width:190px;
    height:190px;
    background-color:FFF;
    margin:10px;
    float:left;
    left:-10px;
    text-align: center;
    padding:10px;
    border:solid 1px #CCC;
    font-size:small;
}

.block p {
    text-align: left;
}

If you want everything centered why are you aligning the text to the left in your paragraph? — Paulie_D, Oct 30 '13 at 12:15
Perhaps take a look here: http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Petra, Oct 30 '13 at 12:20
What browser compatibility does this need to be for, if it is ie8 and above, you can use `display:table-cell; vertical-align:middle` — Pete, Oct 30 '13 at 12:28
You would also need to remove the `float:left` - you can't use `display:table` with `float` here is an example: http://jsfiddle.net/peteng/kGt54/16/ — Pete, Oct 30 '13 at 12:47

DaniP · Accepted Answer · 2013-10-30T13:03:23.877

2

Hi you can use this two properties:

.block {
  display:table-cell;
  vertical-align:middle;
}

and remove the float:left. Review this demo http://jsfiddle.net/kGt54/17/ and ask any question.

Edit

If you want to keep the float:left you need to make an external container who float and have the margin :

.blockC {
  float:left;
  margin:10px;
}

New Demo http://jsfiddle.net/kGt54/29/

edited Oct 30 '13 at 13:03

answered Oct 30 '13 at 12:47

DaniP

37,813
8
65
74

Thank you. What is the "C" in `blockC` by the way? I've never seen anything like that before. – Dr Robotnik Oct 30 '13 at 14:13
It's just to name it :P like block container just my way to do it – DaniP Oct 30 '13 at 14:23
ohhh I see now, I didn't realise you had created a new container in the HTML :) – Dr Robotnik Oct 30 '13 at 14:29

score -1 · Answer 2 · answered Oct 30 '13 at 12:45

-1

.block {
        position:relative;
        background-color:FFF;
        margin:10px;
        float:left;
        left:-10px;
        text-align: center;
        padding:10px;
        border:solid 1px #CCC;
        font-size:small;
    }

    .block p {
        text-align: center;
    }

just remove the width:190px; and height:190px; in the .block{} and in .blick p{} just change the text-align : left; to text-align : center; i hope thats what you want to achieve.. happy coding.

answered Oct 30 '13 at 12:45

jofftiquez

7,548
10
67
121

I need vertical alignment, not horizontal. – Dr Robotnik Oct 30 '13 at 12:47
What are you smoking? – Dr Robotnik Oct 30 '13 at 12:48
yes you said vertically, vertical is from top to bottom.. thats what i did.. align everything centerd from top to bottom. – jofftiquez Oct 30 '13 at 12:53
there is nothing in your code that suggests vertical align. You can't just remove the width and height, that's like "removing" the colour of text. – Dr Robotnik Oct 30 '13 at 12:57
youre defining the width and height of your div to 190x190 then size of your image is 190x190, and you also have some text inside the div, the contents may overlap in the div so you should not define an exact width and height fot the div, if you remove the height and wodth, the div will scale itseft from whatever it has inside. – jofftiquez Oct 30 '13 at 13:02
1

@GreenFox all you have done is horizontally aligned the text in the p tag and remove the fixed sizing of the block rather than aligning all the elements within it vertically. I would have to agree with robotnik's comment of what are you smoking -also if you look at the image it is 190 x 60 – Pete Oct 30 '13 at 13:03
i guess you didnt tried my code did you? the right answer and my code just did the same output. you can try it yourself. – jofftiquez Oct 30 '13 at 13:04
I just did and all it did was reduce the size of the block and horizontally align the p tag - neither of which robotnik wanted – Pete Oct 30 '13 at 13:06
oh i get, my bad, i did not see the Fiddle link hahaha, by the way im smoking weed (just kidding).. you might wanna copy paste my code on a local editor, run it, and you'll understand me :))) – jofftiquez Oct 30 '13 at 13:13

How can I center data inside parent div?

2 Answers2