0

How can I center a <section> vertically and horizontally inside a div?

jsFiddle: http://jsfiddle.net/F3fhK/

Adrift
  • 58,167
  • 12
  • 92
  • 90
  • If the inner section has a known width and height you can use the old negative margin trick (http://jsfiddle.net/F3fhK/3/). – cernunnos Aug 12 '13 at 15:35
  • This does not work mate, as the images will have different heights and widths –  Aug 12 '13 at 15:45

2 Answers2

0

Try using this:

div section {
    color: #FFFFFF;
    background-color: #456087;
    position: absolute;
    top:25%;
    left: 25%;
    bottom: 25%;
    right: 25%;
    opacity:0.3;
    filter:alpha(opacity=30%);
}

JsFiddle : http://jsfiddle.net/nfLyR/

heretolearn
  • 6,387
  • 4
  • 30
  • 53
  • This wont work as each image will have different height and width, so no matter what their size is, the text will be centered. –  Aug 12 '13 at 15:38
  • I suppose, your requirement was to make the section part as the center of the div. So irrespective of the size of the image, the section part will always be placed in the center. This is not what is required ?? – heretolearn Aug 12 '13 at 17:39
  • 1
    I tried with images of different size and it works for me. Can you try ? – heretolearn Aug 13 '13 at 08:53
0

There are two ways:-

  1. Please refer this SO How to make an image center (vertically & horizontally) inside a bigger div

  2. You can give margin:TOP RIGHT BOTTOM LEFT to inner content(img, div, section etc..).

Community
  • 1
  • 1
Mike Phils
  • 3,475
  • 5
  • 24
  • 45