放置在邊框的頂部的對象，居中對齊

橢圓形的是一個叫做特定的按鈕，它的大小取決於文本。邊界屬於一個叫做玩家的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

放置在邊框的頂部的對象，居中對齊

回答

相關問題