Прошу помощи.
Делаю блок "Профиль" в сайдбаре сайта.
Разметка:
Код
<div class="sidebar-module">
<div class="l_box">
<div class="l_box_cover"></div>
<div class="l_box_avatar"><img src="$USER_AVATAR_URL$"></div>
<div class="l_box_undercover"></div>
<div class="l_box_profile"></div>
</div>
</div>
CSS:
Код
.l_box {position: relative; background: #fff; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .15); -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, .15); box-shadow: 0px 1px 4px rgba(0, 0, 0, .15); margin-bottom: 20px;}
.l_box_cover {height: 96px; background: url(../images/bg.jpg);background-size: cover;}
.l_box_avatar {margin: -32px auto;}
.l_box_avatar img {display:block; width: 64px; height: 64px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
Что хочу получить: аватар всегда по центру вне зависимости от ширины блока, и чтоб половиной наезжал на верхний блок. Ну как у вас в профиле.
Подскажите, пожалуйста, где я туплю и не вижу очевидного?