Detailed explanation of examples of using inline-block for centering in CSS

This article mainly explains in detail the example of using inline-block for centering in CSS. When using it, pay attention to the width of the container. Friends in need can refer to the

urgently needed method: inline-block method Centered. The basic approach is to use display: inline-block, vertical-align: middle styles and pseudo-elements to center the content block in the container. My implementation uses several new tricks not seen elsewhere to solve some problems.

The declared width of the content area cannot be greater than 100% of the container minus the width of 0.25em. Like an area with long text. Otherwise, the content area will be pushed to the top, which is why the :after pseudo-class is used. Using the :before pseudo-class will make the element 100% size!

If the content block needs to occupy as much horizontal space as possible, you can add the max-width: 99%; style to the large container, or use max when considering the browser and container width. -width: calc(100% – 0.25em) style.

This method has most of the same benefits as table-cell, but I initially gave up on this method because it was more like a hack. Regardless of this, browser support is great and the method is proving to be very popular.

HTML:

<p class="Center-Container is-Inline">
  <p class="Center-Block">
    <!-- CONTENT -->
  </p>
</p>

CSS:

.Center-Container.is-Inline {    
  text-align: center;   
  overflow: <span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=auto&k0=auto&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;   
}   

.Center-Container.is-Inline:after,   
.is-Inline .Center-Block {   
  display: inline-<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;   
  vertical-align: middle;   
}   

.Center-Container.is-Inline:after {   
  content: &#39;&#39;;   
  height: 100%;   
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}   

.is-Inline .Center-Block {   
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

Benefits:

Content is highly variable
If the content overflows, it can automatically expand the height of the parent element.
The browser has good compatibility and can even be adjusted to support IE7

Also note:

Requires additional containers
Depends on margin- left: -0.25em style, horizontally centered, needs to be adjusted for different font sizes
The declared width of the content area cannot be greater than 100% of the container minus the width of 0.25em

The above is the detailed content of Detailed explanation of examples of using inline-block for centering in CSS. For more information, please follow other related articles on the PHP Chinese website!