放置在边框的顶部的对象，居中对齐

椭圆形的是一个叫做特定的按钮，它的大小取决于文本。边界属于一个叫做玩家的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>

来源

2016-08-03 user6571534

什么是您的HTML？ –

请提供您的HTML代码。我们怎么能找到它？ –

将#specific放在播放器div中，并将其绝对定位。

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

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>

来源

2016-08-03 17:36:22

这应该是最好的，因为我在边界之前和之后有其他文本和东西，所以z-index将是一个坏主意。如果字体大小发生变化（不需要重新调整），这仍然有效。 – user6571534

我会建议增加position: relative到.player，并用一个div（姑且称之为.buttonWrap），它具有以下的CSS包装您的按钮附：

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

来源

2016-08-03 17:34:32 Mila

#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; 
 
\t margin: auto; 
 
    border-style: solid; 
 
    <?php echo $border.$border_color[0] ?>; 
 
    border-radius: 20px; 
 
    margin: 0; 
 
    text-align: center; 
 
\t position: absolute; 
 
} 
 
.button{ 
 
    width: 560px; 
 
    margin: auto; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-bottom: -1em; 
 
    z-index: 10; 
 
}

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

这里是Demo

来源

2016-08-03 17:40:43

.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; 
 
}

<div class="container-lg"> 
 
    <button class="container-sm"></button> 
 
</div>

来源

2016-08-03 17:41:29

放置在边框的顶部的对象，居中对齐

回答

相关问题