Div vertical align centre with relative position

Question

There is a lot on stackoverflow about vertical alignment, but it is not working in my case. See code and CSS below, how to centre the img...

 
.file-upload-content {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.file-upload-image {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}
.btn-verwijderen{
  position: absolute;
  top: 0px;
  right: 0px;
}
.nr-foto{
  position: absolute;
  bottom: 0px;
  right: 0px;  
}

<div class="foto_vak_25_50 border_dashed foto_upload">
    <div class="file-upload-content" id="content_foto2" >
       <img class="file-upload-image" src="#" id='image_foto2' />
       <img src="/img/prullenbak.png" class="btn-verwijderen">
       <img src="/img/nr-2.png" class="nr-foto">
    </div> 
</div>

the image_foto_2 needs to be centred, the nr-foto in the bottom-right corner and the other in the top-right corner (of the div) — Jilco Tigchelaar, Jun 11 '18 at 10:38

Nandita Sharma · Accepted Answer · 2018-06-11T11:06:44.897

1

Added these styles

body , html,.foto_vak_25_50 {
   height: 100%;
}
.file-upload-image {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body , html,.foto_vak_25_50 {
   height: 100%;
}
 
.file-upload-content {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.file-upload-image {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-verwijderen{
  position: absolute;
  top: 0px;
  right: 0px;
}
.nr-foto{
  position: absolute;
  bottom: 0px;
  right: 0px;  
}

<div class="foto_vak_25_50 border_dashed foto_upload">
    <div class="file-upload-content" id="content_foto2" >
       <img class="file-upload-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjzx-JHoAz16ZUQ9fu7FUGvBvsIRn-30nSCHS64zlwZXaeqz3aZw" id='image_foto2' />
       <img src="/img/prullenbak.png" class="btn-verwijderen">
       <img src="/img/nr-2.png" class="nr-foto">
    </div> 
</div>

edited Jun 11 '18 at 11:06

answered Jun 11 '18 at 10:38

Nandita Sharma

13,287
2
22
35

Thanks! Only the horizontal align centre doesn't work anymore. What to add for that? – Jilco Tigchelaar Jun 11 '18 at 10:46
I dont understand where and what is not working ! Can you please elaborate – Nandita Sharma Jun 11 '18 at 10:47
when the image is landscape it aligns correct (because of the max-with 100%), but when portrait it aligns right in stead in the middle – Jilco Tigchelaar Jun 11 '18 at 10:48
Can you please show where its not working! Coz its working fine for me. May be some other styles are interferring with it – Nandita Sharma Jun 11 '18 at 10:52
I cant past a picture/screenshot anymore for some reason. The image_foto2 had to be aligned in the center, horizontal and vertical – Jilco Tigchelaar Jun 11 '18 at 10:58
Its working fine in my code snippet. I just tried. Sorry i cant help you further without actually seeing the problem where it is occuring – Nandita Sharma Jun 11 '18 at 11:07
when i removed the text-align: center; in .file-upload-content the problem was solved :-) – Jilco Tigchelaar Jun 11 '18 at 12:05
Phew! I am glad you found the fix :) – Nandita Sharma Jun 11 '18 at 12:06

Div vertical align centre with relative position

1 Answers1