0

Столкнулся с проблемой центрирования блока, при динамической ширине. Картинка как должно быть:

введите сюда описание изображения

Не выходит центровать блок .description с width:auto; и position:absolute;, вот пример кода - http://jsfiddle.net/y2vqtzvg/

6
  • Текст в этом блоке известен или меняется? position:absolute; в совокупности с top: 100px поставит его по центру если текста будет две строки (как в фиддле) jsfiddle.net/y2vqtzvg/2
    – Cheslab
    19 авг 2015 в 15:36
  • @Cheslab, суть проблемы в том, чтобы выйти за рамки родительского блока и выйти так, чтобы родитель остался своего же размера
    – Neka
    19 авг 2015 в 17:35
  • Тогда width пусть будет больше 100%, например 120%, и отрицательный left jsfiddle.net/y2vqtzvg/3
    – Cheslab
    19 авг 2015 в 18:32
  • может такой вариант подойдет - jsfiddle.net/suzhozLx
    – soledar10
    19 авг 2015 в 18:42
  • @Cheslab в том-то и дело что ширина должна быть auto (
    – Neka
    20 авг 2015 в 5:16

2 ответа 2

2

Чтобы внутренний блок имел width: auto и умел выходить за рамки родителя его нужно вынести из этого родителя в html, а затем снова центрировать.

.parent {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    white-space: nowrap;
    text-align: center; 
}
.parent:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}
.block {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
}
.description {
    width: auto;
    padding:10px 30px;
    background: #2fd72b;
    border-radius: 25px;
    font-size: 24px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.25);
}
.myballoon {
    position: absolute;
    top:50%;
    left:50%;
    margin:-125px 0 0 -125px;
    min-height: 250px;
    min-width: 250px;
    background: #5ea0e4;
    border-radius:50%;
}
.myballoon > .photo {
    width:200px;
    height:200px;
    background: #e1e1e1;
    display: block;
    border-radius:50%;
    margin: 25px 0 0 25px;
}
.myballoon > .cycle {
    width: 100px;
    height: 100px;
    display: block;
    background: #2fd72b;
    position: absolute;
    top: -25px;
    right: -25px;
    border-radius:50%;
    box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.25);
    z-index: 2;
}
<div class="parent">
  <div class="block">
    <div class="myballoon">
      <div class="photo"></div>
      <a href="#" class="cycle"></a>
    </div>
  </div>
</div>
<div class="parent">
  <div class="block">
    <div class="description">много много много теста</div>
  </div>
</div>

1
  • если выносить блок за родителя, то все это свидется к одному дополнительному блоку, но необходимо оставаться в пределах .myballoon , так же он кликабелен и под ним еще есть активный слой. вариант интересный, но проблему не решает(
    – Neka
    20 авг 2015 в 12:21
0

вот метод выровнять по центру вертикали:

.myballoon > .description {
    /* width: auto;  */
    padding: 0px;
    background: #2fd72b;
    border-radius: 25px;
    font-size: 24px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    position: absolute;
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.25);

    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
   }

для чистоты эксперемента я сбросил значение padding до 0px

1
  • суть проблемы в том, чтобы выйти за рамки родительского блока и выйти так, чтобы родитель остался своего же размера)
    – Neka
    19 авг 2015 в 17:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.