Html 按下按钮，在文本后居中_Html_Css

Html 按下按钮，在文本后居中

html css

Html 按下按钮，在文本后居中,html,css,Html,Css,我怎样才能在文本之后按下按钮，因为它现在是固定的，它被卡在文本之前的顶部。它应该放在正文之后：当前结果：预期结果：以下是HTML/CSS标记： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> /*-----------------------------------------------------------

我怎样才能在文本之后按下按钮，因为它现在是固定的，它被卡在文本之前的顶部。它应该放在正文之后：

当前结果：

预期结果：

以下是HTML/CSS标记：

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
/*--------------------------------------------------------------------------------------------------
    CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox_container {
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 1px solid #808080;
    position: relative;
    color: rgb(11,63,113);
}
#alertBox {
    height: 100px;
    width: 400px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    font-family: Arial;
    font-size: 9pt;
}
#alertBox_titlebar {
    line-height:24px;
    width: 100%;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
    font-weight: bold;
}
.alertBox_Button {
    color: #464646;
    border: 1px solid;
    border-color: #999 #666 #666 #999;
    background-color:#ccc;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
    background-color: #ddd;        
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    color: #000000;
}

#alertBox_close {
    line-height: 10px;
    width: 18px;

    font-size: 8pt;
    font-weight: bold;

    margin-top: 2px;
    margin-right: 2px;
    padding-left: 2px;
    padding-top: 2px;
    position:absolute;
    top:0;
    right:0;
}

#alertBox_text {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  text-align: center;
}

#alertBox_div_btn_OK {
  position: absolute;
  width: 100%;
  height: auto;
  text-align: center;
}
#alertBox_btn_OK {
    height: 20px;
    width: 50px;
    font-size: 9pt;
}

</style>

</head>

<body>


<!--            Start of custom alertbox                -->
<div id="alertBox">
    <div id="alertBox_container">
        <div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
        <div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
        <div id="alertBox_text">Searching the database...</div>
        <div id="alertBox_div_btn_OK"><input class="alertBox_Button" id="alertBox_btn_OK" type="button" value="OK" onclick="alertBox_hide()"></div>
        </div>
    </div>
</div>
<!--            End of custom alertbox              -->
</body>

</html>


/*--------------------------------------------------------------------------------------------------
自定义警报框
--------------------------------------------------------------------------------------------------*/
#警报箱{
左：50%；
填充：10px；
最高：50%；
保证金：0；
填充：0；
身高：100%；
边框：1px实心#808080；
位置：相对位置；
颜色:rgb(11,63113);；
}
#警报箱{
高度：100px；
宽度：400px；
底部：50%；
右：50%；
位置：绝对位置；
字体系列：Arial；
字号：9pt；
}
#alertBox_标题栏{
线高：24px；
宽度：100%；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=“#ffffff”，endColorstr=“#cdcdcdcd”）；
字体大小：粗体；
}
.alertBox_按钮{
颜色：#4646；
边框：1px实心；
边框颜色：999#666#666#999；
背景色：#ccc；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorStr='#ffffff'，EndColorStr='#E7E7E7'）；
}
.alertBox_按钮：悬停{
背景色：#ddd；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorStr='#fafafa'，EndColorStr='#dddddd'）；
颜色：#000000；
}
#警报箱关闭{
线高：10px；
宽度：18px；
字号：8pt；
字体大小：粗体；
边缘顶部：2倍；
右边距：2px；
左侧填充：2px；
垫顶：2件；
位置：绝对位置；
排名：0；
右：0；
}
#alertBox_文本{
位置：绝对位置；
宽度：100%；
高度：自动；
最高：50%；
文本对齐：居中；
}
#警报箱分区btn正常{
位置：绝对位置；
宽度：100%；
高度：自动；
文本对齐：居中；
}
#alertBox\u btn\u正常{
高度：20px；
宽度：50px；
字号：9pt；
}
IMTS
正在搜索数据库。。。

我看不出有任何理由将元素完全放在框中。摆脱它：

然后，您可以使用

边距将它们适当隔开。即使是宽度和高度也不需要，除非在更大的页面上有其他内容被覆盖
#alertBox_text {
  width: 100%;
  height: auto;
  text-align: center;
}

#alertBox_div_btn_OK {
  width: 100%;
  height: auto;
  text-align: center;
}