0

I have a problem with the img. Until now it has been impossible to move it to the vertical and horizontal "middle" of the parent element which is a 200px * 200 px div element. Only style="float:left" is working but that's only for left or right.

<div style="width:200px;height:200px;">
    <a>
        <img src="/resources/warenkorb.png" width="50" height="50" />
    </a> 
</div>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Matze2104
  • 1
  • 1

1 Answers1

0

This question is more related to CSS rather than to JSF. Nevertheless I did a quick research on the corresponding CSS topic. Surprisingly there is no straightforward solution for this task and you have to use a workaround.

The best workaround I found involves adding an inner div to get it working. See the following HTML and CSS example (I also added some borders to better visualize the div sizes):

.outer {
  display: table;
  position: absolute;
  height: 200px;
  width: 200px;
  border:1px solid black;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width:120px;
  height:120px;
  border:1px solid red;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <div>Your image here</div>
    </div>
  </div>
</div>

See here for the original post: How to vertically center a div for all browsers?

SCPhantom
  • 400
  • 3
  • 8