Изображение (с абсолютным позиционированием) Горизонтально по центру в контейнере с относительным расположением

0

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

http://jsfiddle.net/CY6TP/ [Это я пытался сделать в JQuery]

**Guys can anyone help me to do this in CSS.**

заранее спасибо

  • 0
    Это не общее решение, но я подумал, что это даст идею; .a {margin-bottom: 50%; наценка сверху: 50%; поле слева: 30%; наценка справа: 30%; }
  • 0
    @berdem спасибо ..... Но проверь ответ, это хорошо
Теги:

5 ответов

1
Лучший ответ

Вы можете установить все в css следующим образом:

a{
position : absolute ;
height : 10px;
width : 100px;
top : 50%; 
margin-top : -5px;
left : 50%; 
margin-left : -50px;}

демонстрация

Поделиться
  • 0
    Это мне очень нравится ... Спасибо брат
  • 0
    пожалуйста, с удовольствием
2

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

var width=$('.main').width();
var height=$('.main').height();


$('a').css(
{
"position":"absolute",
"bottom":"50%",
"margin-top":(height/2),
"left":(width/2)-50

});

DEMO

ОБНОВИТЬ

В CSS

.main a{
   bottom:50%;
    margin-top:-150px;   
    position:absolute;
    left:75px;
}

DEMO

Поделиться
  • 0
    Дорогой брат, спасибо за помощь. Я упомянул в вопросе, что мне нужно это в CSS.
  • 0
    изменить ответ попробовать сейчас @Deekey
Показать ещё 1 комментарий
0

Если ваш рост зафиксирован, вы можете использовать что-то вроде этого, может быть?

CSS:

#div1 {
    width:100%;
    height:100px;
    text-align:center;
}

#div1 img {
    line-height:100px;
}

HTML:

<div id="div1">
    <img src="yourimage.jpg" />
</div>
Поделиться
0

попробуйте сделать это горизонтально

a{
    position: absolute;
    text-align: center;
    width: 100%;
}

ИЛИ чтобы сделать это горизонтально и вертикально как центральным

a {
    height: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}
Поделиться
0 
.main img { top:50%; left:50%; margin: -11px 0 0 -50px; position: absolute;}

Вы этого хотите?

Поделиться
  • 0
    это будет работать, только если ширина и высота вашего изображения одинаковы.
  • 0
    Вы должны добавить пояснение, отредактировав ответ (есть ссылка для редактирования). Комментарии, в которых говорится о важных деталях, как правило, упускаются из виду пользователями и не повышают ценность ответа в целом.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню