中心inline-block父，而忽略浮动元素 [英] Center inline-block div in parent while ignoring floating elements

问题描述

我试图在其父级中心插入 div 。父元素还有一个浮动到右边的子 div 。因为右对齐 div ，我的中心 div 向左移动。我想要将中间的div设置为中心，而不考虑浮动对象的位置/大小，如下图所示。

目前的设置有两个内部div在父，但我假设正确的方式是将右对齐的 div 置于绝对位置之外？

此外，我在同一页面上有多个父div的实例。

 < div id =parentstyle =text-align：center> 
< div style =display：inline-block;> ...< / div> 
< div style =display：inline-block; float：right> ...< / div> 
< / div> 
  

解决方案

设置右div css

  position：absolute; 
 right：0;相对于父div的
  

  #parent {
 position：relative; 
} 
  

I am trying to center an inline div in its parent. The parent element also has a child div that floats to the right. Because of the right aligned div, my centered div is shifted to the left. I want to center the middle div regardless of the position/size of the floating one like the image below.

The current setup has both inner divs inside the parent but I'm assuming the right way is to have the right-aligned div be outside with an absolute position?

Also, I have multiple instances of the parent div on the same page.

What is the best way to achieve this result?

Current Code

<div id="parent" style="text-align:center">
    <div style="display:inline-block;"> ... </div>
    <div style="display:inline-block;float:right"> ... </div>
</div>

解决方案

set the right div css

position:absolute;
right:0;

relative to the parent div

#parent {
position:relative;
}

这篇关于中心inline-block父，而忽略浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！