Question

我是HTML的新手，还在学习。我目前旁边有一个按钮和一个搜索栏，没有居中。我有一个问题集中在他们两个。我尝试了几种方法，但它没有用。我想要的是让他们居中并且彼此相邻

<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">

table, th, td {
    border: 1px solid black;

}

p.pos_right {
    position: relative;
    left: 20px;
}

img {
    display: inline-block;
    z-index:-1;
}

.mine>button,.mine>table{
display: inline-block;float:left;
}



</style>
</head>
<body>
    <div style="text-align:center;">    
    <p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
    </div>

    <div class = "mine" style="text-align:center;">
    <button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
    <table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
    <tr> 
    <td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
    <input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> 
    </td>
    <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> 
    <input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
    </td>
    </tr>
    </table>
    </div>

    <br>

</body>
</html>

Answer 1

按钮和搜索栏是内联元素，所以只需将它们放在div中并给出div text-align：center

<div id="mydiv">
    <input type="submit" value="Update"/>
<input type="text"/>
 </div>

#mydiv{
    text-align: center;
}

https://jsfiddle.net/bdellinger/97xybngh/

Answer 2

这是div上的唯一数据吗？如是。为什么不为包裹table的{{1}}添加静态宽度并给出margin: auto;的CSS

查看我的fiddle

CSS：

.mine{
    width: 208px;
    height: auto;
    overflow: hidden;
    margin: auto;
}

希望它有所帮助。

如何使按钮和搜索栏居中

2 个答案: