Good day!

Please tell me what are the ways of centering the rubber block, I found only one, namely:

html

<div id="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </div>

css

 body, html { text-align: center; } div { display: inline-block; min-width: 450px; max-width: 1200px; height: 80px; padding: 10px; background: #ffffa2; border: 1px solid red; text-align: left; }

The width of the block should be directly dependent on the content (although in the example above, this is not quite the case).

Google and Yandex, did not give intelligible options ...

    2 answers 2

    Sometimes all sorts of help:

     1. left:50%; right:50%; 2. padding-left:50%; padding-right:50%; 3. margin-left:50%; margin-right:50%;

    or

     var w = document.getElementById('box').width; var raz = document.clientWidth //Или используйте свой способ document.getElementById('box').style.left = raz / 2; ps У box должен быть position:absolute
    • No it's not that. - Astor
    • @ Alex83 And what is that for you? - kandi
    • @danpetruk. Such options work fine with statics, but not with rubber. If you know how to arrange this action with rubber, then be kindly a specific example. Sincerely, Alexander - Astor
    • @danpetruk, with the help of javascript, it will not be difficult to do this. And I'm interested in options on pure CSS. - Astor
    • @ Alex83 you can write in the question EVERYTHING you want. If without js, use css-calc calc. No cross-platform, but the fact itself will please - kandi

    The option that I most often use. Works everywhere. The main rule margin: 0px auto;

     body, html { text-align: center; } div { min-width: 450px; max-width: 1200px; height: 80px; padding: 10px; background: #ffffa2; border: 1px solid red; text-align: left; margin: 0px auto; }
    • Dear @zhenyab, read the question carefully. You gave the same example that is described in the question, except that the width of the block, in your case, is not dancing from the content. And it is necessary that the width of the block be directly dependent on the content. In general, you need clean tires without specifying the size of the block. - Astor
    • Yes, I really do not understand. If you do not specify the size, then the DIV will automatically stretch to the full width of the paternal object, and then what kind of centering is it? Describe the task more specifically. Can a piece of the design show how you want it to be, so as not to explain on your fingers? - zhenyab
    • @zhenyab, try to explain again. Suppose the parent is body. It has a rubber block (whose width depends on the content). It is this block that must be clearly positioned in the center of the parent (in our case, the parent is the body). - Astor
    • one
      Oh, if you embrace slowly - I understand faster :)). But I'm afraid the CSS alone cannot cope with this problem. - zhenyab
    • @zhenyab, if interested, then I found another option, namely: If the div'y indicate display: table and margin: 0 auto, then the desired result will be obtained. Good luck - Astor