user6571534 user6571534 - 4 months ago 8
CSS Question

Place an object on top of border, aligned to the center

I basically want something like this:

enter image description here

The oval is a button called specific, its size depends on the text. The border belongs to a div called player. The button should always align to the center of the top border no matter what the sizes they are. Thanks.

#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 code, if it is relevant:

<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

Put #specific inside the player div and position it absolutely.

Then it can be managed into place using position values and a transform.

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;
}
<div class="player">
  <div id="specific">Specific</div>
</div>

Comments