Как поместить изображение справа от центрированного одной

Привет Я пытаюсь поместить изображение рядом с центром однойКак поместить изображение справа от центрированного одной

код выглядит следующим образом:

<div id="body3" > 
    <center><img HEIGHT="700" WIDTH="600" src="Logo.jpg"></center> 
    <img height="40" width="220" ;" src="reserver.png" style="float: right;"> 
</div>

но на втором изображении будет идти под первым и справа. Я хочу, чтобы это было справа от центрированного.

Любые варианты? Спасибо

источник

2016-11-17 Goog1eIt

Попробуйте это:

<div id="body3" > 
    <center><img HEIGHT="700" WIDTH="600" style="display: inline-block;" src="Logo.jpg"> <img height="40" width="220" style="display: inline-block;" src="reserver.png"> </center> 

</div>

источник

2016-11-17 18:47:39 borbesaur

Так что я попробовал ваш вариант и он не работает. Единственный css, который у меня есть, кроме того, который я использую в , является цветом фона в моем листе css. – Goog1eIt

Я отредактировал свой ответ. Поместите оба изображения в центральную метку. – borbesaur

Все, что исправляет эту проблему, но это означает, что первоначально центрированное изображение немного слева от центра ... – Goog1eIt

-1

Вы можете использовать CSS поплавки.

смотри пример на https://jsfiddle.net/z3kwx1x5/1/

Узнайте больше на https://css-tricks.com/all-about-floats/

<div id="body3" style="width:1200px;"> 
    <img style="float:left;margin-left: 220px;" height="700" width="600" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <img style="float:left;margin-top:330px;" height="40" width="220" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
</div>

Оба изображения размещены слева. Если вы хотите, чтобы первое изображение было центрированным, вы можете добавить margin-left к атрибуту стиля inline. Значение левого поля будет зависеть от ширины div # body3

источник

2016-11-17 18:51:26 derekcbaldwin

-2 уже? Кто-нибудь хочет прокомментировать мой ответ? – derekcbaldwin

Downvote не исходил от меня, но похоже, что вы используете поплавки ради плавания. Плавающая первое изображение слева требует, чтобы OP выполняла дополнительную работу, чтобы вернуть изображение обратно в центр, что у него уже есть. В основном один шаг назад, а затем 2 вперед. У вас есть стратегия, но OP не просил новой стратегии, он спросил, как разместить второе изображение справа от первого изображения, которое уже сосредоточено. – borbesaur

Gotcha. Я действительно не поддерживаю использование устаревших тегов, хотя ... http://www.w3schools.com/TAgs/tag_center.asp. Я полагаю, вы всегда можете использовать таблицы или абсолютное позиционирование, но это просто грубо. – derekcbaldwin

Если я понял ваш вопрос, вы хотите, чтобы второстепенная коробка была выровнена после большой коробки и вправо? И не хотите «расширять» ширину основной коробки. Если это ваш вопрос, вот ваше решение:

1- Обработайте свой # body3 в качестве обертки, чтобы избежать вашего div, чтобы выйти из желаемого положения.

2 Совместите ваши элементы с margin: 0 auto; или text-align:center;

CSS

img:nth-of-type(1){ 
     margin:0 auto; 
     background:red; 

    } 
    img:nth-of-type(2){ 
     float:right; 
    } 

    #body3{ 
     margin:0 auto; 
     width:600px; 
    }

HTML

<div id="body3" > 

    <img height="700" width="600" src="http://placehold.it/600x700"> 
    <img height="40" width="220" src="http://placehold.it/220x40"> 

</div>

https://jsfiddle.net/fvcee05a/1/

источник

2016-11-17 19:31:25

Как поместить изображение справа от центрированного одной

ответ

Смежные вопросы