Faced with the problem of centering the block, with dynamic width. Picture as it should be:

enter image description here

It .description not go to center the block .description with width:auto; and position:absolute; , here is an example code - http://jsfiddle.net/y2vqtzvg/

  • Is the text in this block known or changing? position:absolute; in conjunction with top: 100px put it in the center if the text will be two lines (as in fiddle) jsfiddle.net/y2vqtzvg/2 - Cheslab
  • @Cheslab, the essence of the problem is to go beyond the parent unit and exit so that the parent remains its own size - Neka
  • Then let the width be more than 100%, for example 120%, and negative left jsfiddle.net/y2vqtzvg/3 - Cheslab
  • maybe this option will work - jsfiddle.net/suzhozLx - soledar10
  • @Cheslab is just the thing that the width should be auto ( - Neka

2 answers 2

In order for the internal block to have width: auto and to be able to go beyond the parent, it must be removed from this parent in html, and then centered again.

 .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>

  • if you take the block by the parent, then all of this will go to one additional block, but you must stay within .myballoon , it is also clickable and there is still an active layer under it. An interesting option, but it does not solve the problem ( - Neka

here is a method to center on the vertical:

 .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%; }

for the purity of the experiment, I reset the padding value to 0px

  • the essence of the problem is to go beyond the parent unit and go out so that the parent remains its own size) - Neka