Вопросы Теги

Выровнять тег img внутри тега span до центра [duplicate]

Колин предоставляет побитовые операторные функции infix , доступные только для Int и Long.

Поэтому необходимо преобразовать байты в int для выполнения побитовых операций: 

val b : Byte = 127
val res = (b.toInt() and 0x0f).toByte() // evaluates to 15

UPDATE: Поскольку Kotlin 1.1 эти операции доступны непосредственно на байте.

Из bitwiseOperations.kt : 

@SinceKotlin("1.1") 
public inline infix fun Byte.and(other: Byte): Byte = (this.toInt() and other.toInt()).toByte()

291
задан Igor Ivancha 4 February 2016 в 12:58
поделиться

15 ответов

Центрировать изображение в div 

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

0
ответ дан antelove 21 August 2018 в 19:54
поделиться

Использовать позиционирование. Следующие работы работали для меня ... (горизонтально и вертикально центрировано)

С увеличением до центра изображения (изображение заполняет div): 

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Без масштабирования до центр изображения (изображение не заполняет div): 

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
1
ответ дан FinkAvenue 21 August 2018 в 19:54
поделиться

Я собираюсь выйти на конечность и сказать, что вы следуете за вами.

Обратите внимание, что в этом вопросе я случайно не был пропущен (см. комментарий): 

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Итак, вам нужно: 

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

5
ответ дан Jared Farrish 21 August 2018 в 19:54
поделиться
  • 1
    Хм ... Готов поспорить, что все работает. Я сосредоточил IMAGE в своем решении, но я вижу, как вопрос может быть истолкован как центрирование div-enclosing-the-image внутри другого div. В любом случае, такое же решение. – Marvo 12 June 2012 в 03:42
  • 2
    Ни одно из решений не работает на практике. Я попробовал оба решения, прежде чем он просто не сработает. См. Редактирование в вопросе – Jacob Windsor 12 June 2012 в 14:27

, чтобы центрировать изображение по горизонтали, это работает 

<p style="text-align:center"><img src=""></p>
3
ответ дан kalariya parikshith 21 August 2018 в 19:54
поделиться
  • 1
    Да, но если вы планируете отображать изображение как блок, чтобы не допустить этого скучного пробела, это больше не будет работать ... – Dr Fred 17 March 2018 в 16:27 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>
-1
ответ дан KES NORKUS 21 August 2018 в 19:54
поделиться

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

CSS 

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Затем вы можете применить класс CSS, который вы создали, к вашему тегу следующим образом:

HTML 

<img class="center" src="image.jpg" />

Вы также можете встроить CSS в свой элемент (s), выполнив следующее: 

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

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

5
ответ дан Kevin 21 August 2018 в 19:54
поделиться
  • 1
    выполнил эту работу, но для совместимости с браузером вам нужно будет использовать другие формы преобразования. – Jay Smoke 22 January 2018 в 13:44

CSS flexbox может сделать это с justify-content: center в родительском элементе изображения.

HTML 

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS 

.image-container {
  display: flex;
  justify-content: center;
}

Выход: 

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
}
.image-3 {
  width: 300px;
}
<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

42
ответ дан Manoj Kumar 21 August 2018 в 19:54
поделиться
  • 1
    Отличное решение, когда браузер поддерживает это, что и делает. Также можно использовать align-items для вертикального центрирования. Различные решения по маржи не работают для меня, потому что элемент, который должен быть центрирован, не имеет атрибутов ширины и высоты. – Marc Rochkind 16 November 2017 в 23:59
  • 2
    В моем случае div имеет заданный размер (например, 50px), и это растянет изображение на 50 пикселей. – Max 7 August 2018 в 21:39
  • 3
    @Max В этом случае вы можете применить align-self к элементу изображения, подобному этому jsfiddle.net/3fgvkurd – Manoj Kumar 8 August 2018 в 09:38

Это также сделало бы это 

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}
15
ответ дан Mehmet Yaden 21 August 2018 в 19:54
поделиться
  • 1
    Вы имели в виду text-align:center; и margin:0 5px;? Я добавил ; – jagb 22 April 2017 в 23:25
  • 2
    Для последнего свойства в селекторном блоке не требуются точки с запятой @jagb. – TylerH 21 January 2018 в 00:11
  • 3
    @TylerH Thats true, точки с запятой не требуются для последнего свойства в селекторном блоке, но всегда следует использовать точки с запятой. Что делать, если я пишу файл CSS, другой разработчик редактирует мой файл позже, они добавляют некоторый код (после строки с отсутствующей точкой с запятой, линией, которую я написал ранее в этом файле CSS), а их высота, ширина или другое объявление не работают (или, что еще хуже, они не замечают, что они не работают). Я бы сказал, что безопаснее оставлять точки с запятой. Вот почему я использую точки с запятой и никогда не оставляю точки с запятой. – jagb 23 January 2018 в 03:40
  • 4
    @jagb Если другой разработчик позже отредактирует ваш файл, они добавят точки с запятой, если это необходимо, или это будет их проблемой для написания кода с ошибками. Ответ на ваш первоначальный комментарий по-прежнему: «Точки с запятой на последней строке в CSS - это выбор стиля». – TylerH 23 January 2018 в 16:52

Это то, что я закончил: 

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Который ограничит высоту изображения до 600 пикселей и будет горизонтально центрировать (или изменять размер вниз, если ширина родителя меньше) в родительский контейнер, поддерживая пропорции .

8
ответ дан peterh 21 August 2018 в 19:54
поделиться

Поместите изображение внутри newDiv. Сделайте ширину содержащего div той же, что и изображение. Примените margin: 0 auto; к newDiv. Это должно центрировать div в контейнере.

1
ответ дан prasun 21 August 2018 в 19:54
поделиться

вы можете выровнять свой контент с помощью гибкой рамки с минимальным кодом

HTML 

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS 

.image-container{
  width:100%;
  background:green;
  display:flex;


.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

1
ответ дан Santosh Khalse 21 August 2018 в 19:54
поделиться

Если вам нужно сделать это inline (например, при использовании окна ввода), вот быстрый взлом, который работал для меня: объедините ваши (ссылка изображения в этом случае) в div с style="text-align:center" 

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */
0
ответ дан SherylHohman 21 August 2018 в 19:54
поделиться 
##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
-1
ответ дан Siva Kaliyamoorthy 21 August 2018 в 19:54
поделиться
  • 1
    Добро пожаловать в stackoverflow! Пожалуйста, добавьте некоторое объяснение в свой ответ. – Maximilian Peters 15 February 2018 в 14:04
  • 2
    Если мы хотим исправить конкретные <div> или <section> как по вертикали, так и по горизонтали в центре страницы для всех устройств, просто вы можете использовать этот код стиля !!!! – Siva Kaliyamoorthy 15 March 2018 в 11:32
  • 3
    Похоже, этот ответ относится к другому вопросу :) – Manoj Kumar 29 June 2018 в 19:32

Я нашел это решение ниже на странице W3 CSS и ответил на мою проблему. 

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Источник: http://www.w3.org/Style/Examples/007 /center.en.html

55
ответ дан TylerH 21 August 2018 в 19:54
поделиться
  • 1
    Я не думаю, что это хорошая идея, и я считаю, что некоторые предостережения, такие как margin: auto, зависят от содержащего элемента, имеющего заданное значение ширины. – Jared Farrish 12 June 2012 в 01:50
  • 2
    Я все еще улучшаю свои навыки работы с CSS, поэтому спасибо за интересную точку изучения. Но в этом случае он использует фиксированную ширину на контейнере. – Marvo 12 June 2012 в 01:55
  • 3
    Что конкретно обозначает обозначенная ширина в этом контексте? Определенно кажется полезным полезным знанием. – Shoaib 12 June 2012 в 02:09
  • 4
    См. Этот скрипт , который я сделал ; Я не уверен, что думать. То, что вы предлагаете, ничего не сделает, и img, как мне кажется, понадобится ширина, определенная так или иначе, чтобы иметь какой-либо эффект с auto. – Jared Farrish 12 June 2012 в 02:20
  • 5
    На самом деле вы не реализовали решение, которое я представил. Во-вторых, охватывающий div имеет ширину 120 пикселей, что примерно такое же, как ширина изображения, что затрудняет представление, действительно ли оно центрирует изображение. Вот мое решение: jsfiddle.net/marvo/3k3CC/2 – Marvo 12 June 2012 в 03:38
  • 6
    Я использую max-width: 100%; max-height: 100%; для изменения размера изображения, если экран меньше изображения, но в этом случае он не центрирован. Любые предложения о том, как центрировать эти два атрибута – Alexey Strakh 8 June 2016 в 00:07
  • 7
    это хорошо, когда вы все еще хотите получить доступ к верхней границе, ... лучше, чем margin 0 auto – tallgirltaadaa 27 March 2017 в 23:00

Поместите равное отложение пикселей для левого и правого: 

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
2
ответ дан V-SHY 21 August 2018 в 19:54
поделиться