相关疑难解决方法(0)

如何将div中的绝对定位元素居中？

我需要在窗口的中心放置一个div(with position:absolute;)元素.但我这样做有问题,因为宽度未知.

我试过这个.但需要根据宽度的响应进行调整.

.center {
  left: 50%;
  bottom:5px;
}

Run Code Online (Sandbox Code Playgroud)

有任何想法吗？

css center css-position absolute

Ish*_*Ish

2017 02-27

1034
推荐指数

21
解决办法

108万
查看次数

为什么"position:absolute; left:0; right:0; width:XYpx; margin:0 auto"实际上是中心？

我在CSS方面非常精通,但今天我偶然发现了一个令我头疼的片段(这里和这里).

我从来不认为我们可以通过中心绝对定位的元素margin: 0 auto,但鉴于问题的元素有一组宽度,还有的left: 0和right: 0,它实际上似乎工作:

#parent
{
    background: #999;
    height: 300px;
    position: relative;
    width: 300px;
}

#child
{
    background: #333;
    height: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
}

Run Code Online (Sandbox Code Playgroud)

<div id="parent">
    <div id="child"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

(JSFiddle)

我一直以为left: 0和right: 0将决定元素的宽度(它100%的第一个相对定位的父),但似乎width这里的优先级,因此使得margin: 0 auto工作.

这是定义的行为吗？我可以在任何规格中找到它的相关信息吗？我google了一下,但没有任何用处.

html css

mar*_*ead

2017 05-23

16
推荐指数

2
解决办法

7992
查看次数

元素不会保持居中,特别是在重新调整屏幕大小时

我的问题是我不能水平居中三角形指针.

好吧,我可以将指针放在一些窗口大小的中心,但是当我收缩或扩展窗口时,它会再将它放在错误的位置.

我错过了什么？

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: 48%;
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container container-decor">great distance</div>

Run Code Online (Sandbox Code Playgroud)

html css css3 css-shapes

R. *_*ght

2016 07-14

9
推荐指数

1
解决办法

3028
查看次数

中心绝对定位div

我有一个 div，里面有一个按钮：

我让按钮位置为absolute，其样式代码为：

  .buy-btn {
    text-align: center;
    position: absolute;
    bottom: 10px;

  }

Run Code Online (Sandbox Code Playgroud)

我怎样才能将它对齐到中心？我试过 add margin: 0 auto;，但它不起作用。

html css css-position

244*_*boy

2020 10-20

7
推荐指数

2
解决办法

2万
查看次数

当子项绝对定位时，将子项置于父项的中心

有没有办法将absolute已定位的元素定位到其已定位的父元素的中心relative？

我在想是否可以以某种方式计算父级的宽度，并据此将子级居中？但不确定从哪里开始，是使用 JavaScript 还是 CSS。

这是可供参考的代码笔

javascript css

Eri*_*yen

lucky-day

0
推荐指数

1
解决办法

1768
查看次数

如何在div中水平居中绝对按钮？

我试图将一个绝对按钮放在一个 div（在底部）中，但它似乎不起作用..这是我现在正在做的事情：

.mc-item {
  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
}

.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
}

.mc-item p {
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 col-sm-12">
  <div class="mc-item">
    <p>Changez votre adresse email ou votre mot de passe.</p>
    <a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这给出了以下结果：