CODEWITHSUNDEEP
htmlcss
marse
marse

Reputation: 873

how to center the button and search bar

I am new to HTML and still learning. I currently have a button and a search bar beside each other and not centered. I am having a problem centering both of them. I have tried several ways but it did not work. What i want is for them to be centered and still beside each other

<!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>

Upvotes: 0

Views: 5059

Answers (2)

John
John

Reputation: 425

Are this the only data on the table ? If Yes. why not put a static width for the div that wraps the table and give a CSS of margin: auto;

See my fiddle

CSS:

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

Hope it helps.

Upvotes: 0

Bryan Dellinger
Bryan Dellinger

Reputation: 5294

button and search bar are inline elements so just put them in a div and give the 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/

Upvotes: 1

Related Questions