перемещение img в середину - PullRequest
Новая
       7

перемещение img в середину

0 голосов
/ 27 мая 2018

У меня проблема с img.До сих пор было невозможно переместить его в вертикальную и горизонтальную «середину» родительского элемента, который является элементом div размером 200px * 200 px.Работает только style = "float: left", но это только для левой или правой стороны. 

<div style="width:200px;height:200px;">
    <a>
        <img src="/resources/warenkorb.png" width="50" height="50" />
    </a> 
</div>

1 Ответ

0 голосов
/ 27 мая 2018

Этот вопрос больше относится к CSS, чем к JSF.Тем не менее я провел быстрое исследование по соответствующей теме CSS.Удивительно, но для этой задачи нет простого решения, и вы должны использовать обходной путь.

Лучший найденный мной обходной путь заключается в добавлении внутреннего div для его работы.Посмотрите следующий пример HTML и CSS (я также добавил некоторые рамки для лучшей визуализации размеров div ): 

.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>

Исходное сообщение см. Здесь: Как расположить div по центру по вертикали для всех браузеров?

...