Установите изображение в центре детского div

Question

Установите изображение в центре детского div

0

Мой код похож на этот

<div id="main_1" style="background-color: #FFD993;
        color: darkbrown;
        border: 1px outset #A61C14;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px; width:100%;height:20%;text-align:center;margin-bottom:10px;">

        <div id="left_1" style="background-color: ;border: 1px;
         width:60%; height:90%;text-align: center; float:left;">


        </div>
        <div id="middle_1" style="background-color: ;border: 1px;
         width:20%; height:100%;text-align: center; float:left;">
        <img src="numb/equal.png" alt="Klematis" width="100%" height="50%">
        </div>
        <div id="right_1" style="background-color: ;border: 1px;
         width:20%; height:100%;text-align: center; float:right;" >

         <img src="numb/1.png"alt="Klematis" width="50px" height="60px">
        </div>

              </div>

Я хочу, чтобы изображение 1.png отображалось вертикально в середине div right_1.

Искал много, но ничего не помогло. пожалуйста помоги.

RIzwan Alam 18 апр. 2014, в 13:02

Источник

1

1.png уже в середине right_1
Shijin 18 апр. 2014, в 10:21
0

1.png установлен посередине в right_1 div. Пожалуйста, уточните свой вопрос, поместив код в jsfiddle.
shashank 18 апр. 2014, в 10:25
0

Пожалуйста, избегайте использования встроенных стилей ... Зачем использовать CSS
T J 18 апр. 2014, в 11:58

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

1

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

CSS:

   #right_1 {
   position:relative;
   }

   #right_1 img {
   position:absolute; 
   right:50%; 
   margin-right:-25px; 
   top:50%; 
   margin-top:-30px;
   }

и я думаю, что лучше использовать размер с пикселем вместо%. удачи

IVIajid 18 апр. 2014, в 07:43

Ещё вопросы

1.png установлен посередине в right_1 div. Пожалуйста, уточните свой вопрос, поместив код в jsfiddle.
Пожалуйста, избегайте использования встроенных стилей ... Зачем использовать CSS

T J · Accepted Answer · 2014-04-18T08-49-00.000Z

Применить position:relative; для родительского div и применить

position:absolute;
top:50%;
margin-top:-30px; // height of element/2
}

для вертикального центрирования элемента...

Если поддержка старых браузеров не является проблемой, вы можете использовать css3 flex,

подать выражение

display:flex;
align-items:center;

для родительского div.

Спасибо, это решило мою проблему.