将对象放在边框顶部，与中心对齐

Question

我基本上想要这样的东西：

椭圆是一个叫做特定的按钮，它的大小取决于文字。边框属于一个叫做玩家的div。无论尺寸大小，按钮都应始终与顶部边框的中心对齐。感谢。

#specific
{
  display: inline-block;
  padding: 5px 15px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff; 
  border: none;
  border-radius: 20px;
}
.player
{
  width: 560px;
  padding: 20px;
  border-style: solid;
  <?php echo $border.$border_color[0] ?>;
  border-radius: 20px;
  margin: 0;
  text-align: center;
}

HTML代码，如果相关：

<input type="button" id="specific" value="<?php echo $id; ?>" onclick='window.open("<?php echo $specific; ?>")'>

<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>

Answer 1

将#specific放入播放器div中并绝对定位。

然后可以使用位置值和变换将其管理到位。

＆＃13;

＆＃13;

body {
  text-align: center;
}

#specific
{
  display: inline-block;
  padding: 5px 15px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff; 
  border: none;
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform:translate(-50%, -50%);
  background: lightblue;
  border:inherit;
}
.player
{
  width: 560px;
  padding: 20px;
  display: inline-block;
  margin: 2em;
  border-style: solid;
 border-color:blue;
  border-radius: 20px;
  text-align: center;
  position: relative;
}

＆＃13;

<div class="player">
  <div id="specific">Specific</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议将position: relative添加到.player，并使用div（让我们称之为.buttonWrap）包装您的按钮，其中包含以下css：< / p>

.buttonWrap {
  position: absolute;
  left: 0;
  top: -20px; /* the number of pixels here should be calculated like (buttonHeight / 2) */
  width: 100%;
  text-align: center;
}

Answer 3

#specific
{
  display: inline-block;
  padding: 5px 15px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff; 
  border: none;
  border-radius: 20px;
}
.player
{
  width: 560px;
  padding: 20px;
	margin: auto;
  border-style: solid;
  <?php echo $border.$border_color[0] ?>;
  border-radius: 20px;
  margin: 0;
  text-align: center;
	position: absolute;
}
.button{
  width: 560px;
  margin: auto;
  text-align: center;
  position: relative;
  margin-bottom: -1em;
  z-index: 10;
}

<div class="button">
	<input type="button" id="specific" value="Play" onclick='window.open("<?php echo $specific; ?>")'>
</div>
<div class="player">
	<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>

这是Demo

Answer 4

let gradient3 = NSGradient(colors: cAndL.map{$0.0}, atLocations: cAndL.map{$0.1}, colorSpace: NSColorSpace.genericRGBColorSpace()) 

.container-lg {
  border: 4px solid rgba(50, 150, 255, 1);
  border-radius: 50px;
  width: 400px;
  height: 400px;
  margin-top: 50px;
}

button.container-sm {
  background-color: rgba(100, 175, 255, 1);
  border: 2px solid rgba(50, 150, 255, 1);
  border-radius: 40px;
  width: 150px;
  height: 40px;
  display: block;
  margin: auto;
  margin-top: -22px;
}