Вопросы Теги

Как сделать центр изображения (вертикально и горизонтально) внутри большего элемента [дубликата]

У меня также была эта проблема с программой Java, пытающейся отправить команду на сервер через SSH. Проблема заключалась в том, что машина выполнила код Java. У него не было разрешения на подключение к удаленному серверу. Метод write () выполнял все в порядке, но метод read () выбрал java.net.SocketException: Connection reset. Я исправил эту проблему, добавив ключ SSH клиента к известным ключам удаленного сервера.

392
задан jao 21 July 2016 в 13:00
поделиться

8 ответов

Лично, я поместил бы его как фоновое изображение в отделении, CSS для того существа: 

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Принимает отделение с id="demo", поскольку Вы уже указываете height и width, добавление background не должно быть проблемой)

, Позволяют браузеру взять деформацию.

318
ответ дан Black 21 July 2016 в 23:00
поделиться
  • 1
    @GradyPlayer " will" довольно сильно; данные или это didn' t происходят. Быстрый тест говорит Debian' s GCC 4.4.5 на AMD64 производит идентичный блок для (i & 1) != 0 и (i % 2) != 0. #include <stdio.h> int main(void) { volatile int i = 1; volatile int j = (i & 1) != 0; printf("%d", j); return j; } (и то же с i%2 вместо i&1). cc -S и diff -u говорит [только 119], различие .file директива (потому что я сделал один файл для каждого). – a CVn 18 May 2013 в 10:41

Как правило, я установлю line-height, чтобы быть 200 пкс. Обычно добивается цели.

8
ответ дан Triptych 21 July 2016 в 23:00
поделиться
  • 1
    может подтвердить с @conor; jQuery.noConflict () перед вызовом к .modal (' show') решил проблему и в Chrome и в Firefox и избавился от ужасного обходного решения – nyusternie 10 December 2013 в 09:41

Вертикальный - выравниваются, один из наиболее неправильно используемых стилей CSS. Это не работает, как Вы могли бы ожидать на элементах, которые не являются td's или CSS "дисплей: ячейка таблицы".

Это - очень хорошее сообщение по вопросу. http://phrogz.net/CSS/vertical-align/index.html

наиболее распространенные методы для достигания, что Вы ищете:

  • дополнительная вершина/нижняя часть
  • положение, абсолютное
  • высота строки
12
ответ дан Alex 21 July 2016 в 23:00
поделиться
  • 1
    У меня была та же проблема при тестировании в Windows. Я переключился на fs.watchFile() вместо fs.watch(), оба метода отмечены как нестабильные, но это решило мою проблему. – Drahcir 10 April 2014 в 02:43

в отделении 

style="text-align:center; line-height:200px"
13
ответ дан Scott Evernden 21 July 2016 в 23:00
поделиться

Я установил бы Ваше более многочисленное отделение с position:relative; затем для Вашего изображения, делают это: 

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Это только работает, потому что Вы знаете размеры и изображения и содержания отделения. Это также позволит Вам иметь другие объекты в рамках содержания отделения..., где решения как использование высоты строки не будут.

РЕДАКТИРОВАНИЕ :Примечание... Ваши поля являются отрицательной половиной размера изображения.

77
ответ дан Tim Knight 21 July 2016 в 23:00
поделиться

иначе должен создать table с valign, конечно. Это работало бы независимо от Вас знающий высоту отделения или нет. 

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

, но необходимо всегда придерживаться всего css, когда это возможно.

104
ответ дан andyk 21 July 2016 в 23:00
поделиться
  • 1
    Что относительно производительности? действительно ли это примечательно? – Iman Mohamadi 4 June 2014 в 18:46

Если Вы знаете размер родительского отделения и изображения, можно просто использовать абсолютное расположение.

-1
ответ дан recursive 21 July 2016 в 23:00
поделиться
  • 1
    В ударе внешние (...) создают массив, который индексируют более поздние строки. Иначе результатом является просто aa единственная строка трех чисел – Adrian Pronk 19 August 2011 в 21:12

I have a gallery of images for which I don't know the exact heights or widths of images beforhand, I just know that they are smaller than the div in which they are going to be contained.

By doing a combination of line-height settings on the container and using vertical-align:middle on the image element, I finally got it to work on FF 3.5, Safari 4.0 and IE7.0 using the following HTML markup and the following CSS.

The HTML Markup

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

The CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }
8
ответ дан 22 November 2019 в 23:40
поделиться