HTML CSS изображение не будет в центре?

Question

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

HTML:

<div id="container">

    <div id="featureimage"  style="width: 845px">
        <img src="Stylesheets/images/globkey.jpg" alt="" />
    </div>

</div>

CSS:

body {
    background-color: #383838;
    margin: 0; padding: 0;
    font-size: small;
    color: #383838;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
* html body {
    font-size: x-small; /* for IE5/Win */
    font-size: small; /* for other IE versions */
    }

img {
    border-style: none;
}



/* Conatiner */ 
#container {
    background-color: #fff;
    width: 845px;
    margin: 0 auto;
    overflow: hidden;
    }


#featureimage{
    width: 620px;
    padding: 0 0 0 15px;
    margin: 20px 0;

/* I have also tried without padding and no margin!*/
    }   

#featureimage img{
    margin-left:50%;
    margin-right:50%;
    width:360px;
    height:360px;
    }

Я свежа из идей здесь! Будь на это навсегда!

Спасибо за любую помощь,

Evan

Answer 1

Изображения являются встроенными элементами, для их центрирования вы можете использовать text-align: center; или установить их на display: block и установить margin: 0 auto;

Answer 2

просто добавьте text-align: center к вашему #container, а затем добавьте margin: 20px auto; к вашей особенности изображения. Если вы хотите, чтобы img центрировался внутри FeatureImage, он должен работать (FeatureImage унаследует text-align: center).

Answer 3

Использование:

margin: auto !important;
display: block;

Также попробуйте зайти в Play Store и загрузить HTML-код приложения, которое вам пригодится.

Answer 4

В соответствии с предоставленной вами структурой разметки достаточно:

img {
    display: block;
    margin: 0 auto;
}

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

#featureimage {
   text-align: center;
}
img {
    display: inline-block;
    vertical-align:top; // It is recommended when you use css property vertical-align
}

Answer 5

Это также можно решить, просто вставив тег :

<center>
<img src="abc.gif">
</center>

Но лучший способ и html5-подобный следующий:

определите в заголовке :

<style>
    img {
        display: block;
        margin-left: auto; 
        margin-right: auto;
    }
 </style>

Чтобы использовать этот класс в теле :

<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>

Вот и все.Последний метод рекомендован w3c.

Answer 6

я бы использовал это наверняка, абсолют;сохранит его в том месте, если вы хотите, чтобы он перемещался с фиксированной страницей;но кроме этого бума

#featureimage {
  width: "change this code to whatever expample..."   555px;
  height: "change this code to whatever example..."    96px;
  position: absolute;
  top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
  right: "same with this i had to put - to get it right as far as i could just play with it..."  -945px;
}

Answer 7

Я бы попробовал этот CSS:

#featureimage{
  width: 620px;
  padding: 0 0 0 15px;
  margin: 20px auto 0px auto;
  text-align: center;
}

Возможно, я полностью отключился, потому что я не проверял его.

Answer 8

#featureimage{
    width: 620px;
    padding: 0 0 0 15px;
    margin: 20px 0;
    text-align:center;
}