не может центрировать изображение внутри div

Question

не может центрировать изображение внутри div

0

У меня есть верхний div на моей странице, но выше моей навигации. Я хочу логотип компании в середине этого div. однако margin: 0 auto не работает. Я пробовал возиться с позиционированием div, чтобы быть абсолютным, и изображение должно быть релевантным, и наоборот.

Я пробовал выравнивание по центру, выравнивание текста (достаточно глупо), даже left: 50%. left: 50% действительно работает, но поскольку ширина изображения превышает 100 пикселей, логотип больше не центрируется, даже если порождение изображения составляет 50%.

Я хотел, чтобы он left 30% но это нечестно на всех размерах экрана. Я просто не могу понять, как сделать этот образ в центре div. Кто-нибудь знает, как я могу это сделать?

HTML

<div id="stripes">
    <img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">

CSS

#stripes
{
    width: 100%;
    height: 185px;
    background-image: url('stripes.png'); 
}


.JClogo
{
    position: absolute;
    margin: 0 auto;
    height: 194px;
    width: 389px;
}

user2903379 12 нояб. 2013, в 15:27

Источник

0

Удалить position:absolute , добавить display:block .
CBroe 12 нояб. 2013, в 14:06

Теги:

html

css

4 ответа

Ещё вопросы

Удалить position:absolute , добавить display:block .

ravb79 · Answer 1 · 2013-11-12T12-49-00.000Z

Я не думаю, что margin: 0 auto будет работать с абсолютным позиционированием. Удалите position:absolute ИЛИ место left:50%; margin-left:-195px left:50%; margin-left:-195px on .JClogo.

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

Howard Renollet · Answer 2 · 2013-11-12T11-50-00.000Z

Это должно делать то, что вы ищете:

        #stripes
        {
            width: 100%;
            height: 185px;
            background-image: url('stripes.png'); 
            text-align:center;
        }

        .JClogo
        {
            height: 194px;
            width: 389px;
        }

Работает: jsfiddle.net/6wRpf/1 - убрать margin , ничего полезного не делает.

Sachin · Answer 3 · 2013-11-12T11-40-00.000Z

если вы позиционируете элемент как absolute то margin 0 auto не будет работать. Удалите position: absolute; и добавьте display:block в класс JClogo css.

.JClogo{
   margin: 0 auto;
   height: 194px;
   width: 389px;
   display:block;
}

Демо-версия JsFiddle

Afzaal Ahmad Zeeshan · Answer 4 · 2013-11-12T13-05-00.000Z

Проблема связана с кодом:

position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;

Абсолютная позиция позволяет ему плавать по предоставленным параметрам.

Поэтому попробуйте это, это заставит изображение плавать в центре элемента.

position: absolute;
top: 20%; // this 
left: 20%; // and this
height: 194px;
width: 389px;

Таким образом, вы измените параметры изображения и сделаете его плавающим, где хотите. Если вы хотите использовать position: absolute; в противном случае вы можете удалить это и просто использовать margin: values.