[英]How to horizontally center an absolutely positioned div over its relatively positioned parent?
I have a speech-bubble class that has a dynamic size and is absolutely positioned. 我有一个语音泡泡类,它具有动态大小并且绝对定位。 I want it to always be horizontally centered over its parent element which is relatively positioned, no matter what the speech-bubble's size is. 我希望它总是水平居中于其相对定位的父元素,无论语音泡沫的大小是多少。 I want it to look something like this (where the letter 'O' is the parent relatively positioned element): 我希望它看起来像这样(字母'O'是父相对定位的元素):
Currently, it looks like this if I set the left
attribute to 0: 目前,如果我将left
属性设置为0,它看起来像这样:
This is an easy problem to solve if I can guarantee that the size of the bubble is fixed, but it is most definitely not. 如果我可以保证气泡的大小是固定的,那么这是一个容易解决的问题,但绝对不是。 I can't solve this by setting width
or left
or margin-left
on an element with class bubble
. 我无法通过在带有类bubble
的元素上设置width
或left
margin-left
或margin-left
来解决此问题。 It needs to be more robust than that. 它需要比这更强大。
I would prefer a css solution if there is one. 如果有的话我更喜欢css解决方案。 However, if the only solution is a javascript one, I will consider that as well. 但是,如果唯一的解决方案是javascript,我也会考虑。
This is what the code looks like. 这就是代码的样子。 Note that the margins on smart-bubble-wrapper are not really needed, they only exist so that you can see the bubble in the code sample: 请注意,智能气泡包装器上的边距并不是真正需要的,它们只是存在,因此您可以在代码示例中看到气泡:
.bubble-wrapper { position: relative; margin-top: 100px; margin-left: 100px; } .bubble { display: block; position: absolute; padding: 10px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 1px #bababf; box-shadow: 0px 0px 5px #6bcded; left: 0; color: #333333; } .bubble-bottom { bottom: 30px; } .bubble-middle-after { left: calc(50% - 8px); } .bubble-middle-before { left: calc(50% - 10px); } .bubble-bottom-before { bottom: -8px; } .bubble-bottom-after { bottom: -12px; border-width: 12px 12px 0; border-style: solid; border-color: #FFFFFF transparent; } .bubble-after { content: ''; position: absolute; display: block; } .bubble-before { content: ''; position: absolute; border-style: solid; border-color: #bababf; border-width: 13px 13px 0; background-color: white; display: block; box-shadow: 0px 0px 5px #6bcded; width: 0px; height: 10px; z-index: -1; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
<div class="bubble-wrapper"> O <div class="bubble bubble-middle bubble-bottom" arrow-horizontal="middle" arrow-vertical="bottom"> <div class="bubble-before bubble-middle-before bubble-bottom-before"></div> <span class="ng-scope">How do I center this bubble</span> <div class="bubble-after bubble-middle-after bubble-bottom-after"></div> </div> </div>
You can use 您可以使用
x
选择足够大的长度x
left
to some negative value -x
将left
设置为某个负值-x
right
to calc(100% - x)
设置right
以calc(100% - x)
x
is big enough, the absolutely positioned element will be centered at the left. 假设x
足够大,绝对定位的元素将在左侧居中。 2*x
. 但它的宽度将是2*x
。 Use width: fit-content
or width: max-content
to fix this. 使用width: fit-content
或width: max-content
来解决此问题。 margin-left
and margin-right
to auto
to keep the centering. 将margin-left
和margin-right
为auto
以保持居中。 For example, choosing x = 100%
, 例如,选择x = 100%
,
left: -100%;
right: 0;
width: fit-content; /* may need vendor prefixes */
margin: 0 auto;
.bubble-wrapper { position: relative; margin-top: 100px; margin-left: 100px; } .bubble { display: block; position: absolute; padding: 10px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 1px #bababf; box-shadow: 0px 0px 5px #6bcded; color: #333333; left: -100%; right: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; /* may need vendor prefixes */ margin: 0 auto; } .bubble-bottom { bottom: 30px; } .bubble-middle-after { left: calc(50% - 8px); } .bubble-middle-before { left: calc(50% - 10px); } .bubble-bottom-before { bottom: -8px; } .bubble-bottom-after { bottom: -12px; border-width: 12px 12px 0; border-style: solid; border-color: #FFFFFF transparent; } .bubble-after { content: ''; position: absolute; display: block; } .bubble-before { content: ''; position: absolute; border-style: solid; border-color: #bababf; border-width: 13px 13px 0; background-color: white; display: block; box-shadow: 0px 0px 5px #6bcded; width: 0px; height: 10px; z-index: -1; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
<div class="bubble-wrapper"> O <div class="bubble bubble-middle bubble-bottom" arrow-horizontal="middle" arrow-vertical="bottom"> <div class="bubble-before bubble-middle-before bubble-bottom-before"></div> <span class="ng-scope">How do I center this bubble</span> <div class="bubble-after bubble-middle-after bubble-bottom-after"></div> </div> </div>
For browsers that don't support width: fit-content
, you can add an inline-block inner wrapper, which can be centered with text-align: center
. 对于不支持width: fit-content
浏览器,您可以添加一个内联块内部包装器,它可以使用text-align: center
。
.bubble-wrapper { position: relative; margin-top: 100px; margin-left: 100px; } .bubble { display: block; position: absolute; left: -100%; right: 0; text-align: center; margin: 0 auto; } .bubble-inner-wrapper { position: relative; display: inline-block; vertical-align: middle; padding: 10px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 1px #bababf; box-shadow: 0px 0px 5px #6bcded; color: #333333; } .bubble-bottom { bottom: 30px; } .bubble-middle-after { left: calc(50% - 8px); } .bubble-middle-before { left: calc(50% - 10px); } .bubble-bottom-before { bottom: -8px; } .bubble-bottom-after { bottom: -12px; border-width: 12px 12px 0; border-style: solid; border-color: #FFFFFF transparent; } .bubble-after { content: ''; position: absolute; display: block; } .bubble-before { content: ''; position: absolute; border-style: solid; border-color: #bababf; border-width: 13px 13px 0; background-color: white; display: block; box-shadow: 0px 0px 5px #6bcded; width: 0px; height: 10px; z-index: -1; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
<div class="bubble-wrapper"> O <div class="bubble bubble-middle bubble-bottom" arrow-horizontal="middle" arrow-vertical="bottom"> <div class="bubble-inner-wrapper"> <div class="bubble-before bubble-middle-before bubble-bottom-before"></div> <span class="ng-scope">How do I center this bubble</span> <div class="bubble-after bubble-middle-after bubble-bottom-after"></div> </div> </div> </div>
NOTE: Values of 0 shouldn't have units specified. 注意: 值0不应指定单位。
You could also re-position your bubble absolutely. 你也可以绝对重新定位你的泡泡。
.bubble-bottom-after:before {
content: 'O';
position: absolute;
left: -6px;
}
.smart-bubble-wrapper { position: relative; margin-top: 100px; margin-left: 100px; } .bubble-bottom-after:before { content: 'O'; position: absolute; left: -6px; } .bubble { display: block; position: absolute; padding: 10px; background: #FFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 1px #bababf; box-shadow: 0 0 5px #6bcded; left: -105px; color: #333; } .bubble-bottom { bottom: 30px; } .bubble-middle-after { left: calc(50% - 8px); } .bubble-middle-before { left: calc(50% - 10px); } .bubble-bottom-before { bottom: -8px; } .bubble-bottom-after { bottom: -12px; border-width: 12px 12px 0; border-style: solid; border-color: #FFF transparent; } .bubble-after { content: ''; position: absolute; display: block; } .bubble-before { content: ''; position: absolute; border-style: solid; border-color: #bababf; border-width: 13px 13px 0; background-color: white; display: block; box-shadow: 0 0 5px #6bcded; width: 0; height: 10px; z-index: -1; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> <div class="smart-bubble-wrapper"> <div class="bubble bubble-middle bubble-bottom" arrow-horizontal="middle" arrow-vertical="bottom"> <div class="bubble-before bubble-middle-before bubble-bottom-before"></div> <span class="ng-scope">How do I center this bubble</span> <div class="bubble-after bubble-middle-after bubble-bottom-after"></div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.