centering a image in a section

Question

I want this image be right in the center of the page, in a section but it is not working, btw I'am using jade and sass. Jade:

section.believe(data-section-name='texture', <='', body='')
      img.minion(src="/images/IMG_6219.jpg")

Sass:

  .minion
    top: 50%
    left: 50%
    padding: 100px
    margin: 0 auto
    height: 10%
    transform: rotate(90deg)

I would encourage you to use a div instead of a section tag. http://stackoverflow.com/questions/2134333/centering-an-image-within-a-div — dYale, Feb 17 '16 at 00:43
You can give `display: inline-block` to the child and `text-align: center` to the parent. Else you should make sure that your section has `display: block` and that it is taking up the full width of the page. — Jordan Mulder, Feb 17 '16 at 00:48
the reason i used the section tag was to use scroll snapping with scrollify (http://projects.lukehaas.me/scrollify/) it just make it easier to organize. — Shaheer Saif, Feb 17 '16 at 00:52
- Jordan Mulder I tried that but it did not change anything. .believe text-align: center display: block .minion display: inline-block top: 50% left: 50% display: block padding: 100px height: 10% transform: rotate(90deg) — Shaheer Saif, Feb 17 '16 at 00:57
you are likely missing `position: absolute` http://codepen.io/anon/pen/zrXqEV — G-Cyrillus, Feb 17 '16 at 01:48
I might be misinterpreting, but perhaps try: `.believe {display:block;} .minion {display:block;margin:0 auto;}` Edit: Sorry I pressed enter while trying to figure out how to add the code snippet style :) — Crispin Twig, Feb 17 '16 at 06:28
Unless you have a Sass->CSS or Jade->HTML compilation issue, **only post the compiled CSS/HTML**. — cimmanon, Feb 17 '16 at 11:56

score 0 · Accepted Answer · answered Feb 17 '16 at 09:16

0

try this

.minion
    position: absolute
    top: calc(50% - 400px)
    left: calc(50% - 400px)
    margin: 0

400px = half of the image width/height

answered Feb 17 '16 at 09:16

Vikram

1 Answers1