CODEWITHSUNDEEP
htmlcsslayout
thelost
thelost

Reputation: 705

Centering buttons using CSS

I am trying to center these buttons, but most stuff online does not work. <center> does not work and text-align:center does not work.

The buttons should show up in the exact same way, except centered in the middle. If you try this, it will not work. there must be a problem, I guess.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
.button0 {
position:fixed;
left:88px;
top:58px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
.button1 {
position:fixed;
left:6px;
top:191px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
text-align: center;
margin-left:auto;
margin-right:auto;
}
.button2 {
position:fixed;
left:358px;
top:216px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
</style>
<body>
<center>
<div class="button0"><input type="button" style="width: 268px;height: 145px;" value="Button"/></div>
<div class="button1"><input type="button" style="width: 40px;height: 88px;" value="Button"/></div>
<div class="button2"><input type="button" style="width: 76px;height: 73px;" value="Button"/></div>
</center>
</body>
</html>

Upvotes: 0

Views: 21461

Answers (5)

mikul
mikul

Reputation: 536

Try vertically-centered text in a div. See JSFiddle Demo for example.

Upvotes: 0

SQLMason
SQLMason

Reputation: 3275

You want to wrap it in a relative div. Then you can set the margins of the left and right to auto.

Just to be clear, is this what you're looking for?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>website</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">

</style>
<body>
    <div style="position:relative; width:500px; height:200px; background:green; text-align:center">
        <input type="button" style="width: 268px;height: 145px;" value="Button1"/>
        <input type="button" style="width: 40px;height: 88px;" value="Button2"/>
        <input type="button" style="width: 76px;height: 73px;" value="Button3"/>
    </div>
</body>
</html>

Upvotes: 0

ggzone
ggzone

Reputation: 3721

.container {
text-align: center;
}

.center-element {
width: 100px;
text-align: left;
}

or

.container {
width: 200px;
}

.center-element {
width: 100px;
margin: 0px auto 0px auto;
}

or

.container {
width: 200px;
}

.center-element {
width: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}

Upvotes: 6

Marcus Olsson
Marcus Olsson

Reputation: 2527

jsfiddle - just turn the button to a block element, specify the width, and then auto margins left and right.

Upvotes: 0

James Hill
James Hill

Reputation: 61862

You can't assign position:fixed and top & left and expect your elements to be centered. Typically, margin: 0px auto will work well. See example below.

.button0 {
    font-family:MS Shell Dlg 2;
    font-size:8px;
    font-weight:NORMAL;
    margin: 0px auto;
}
.button1 {
    font-family:MS Shell Dlg 2;
    font-size:8px;
    font-weight:NORMAL;
    text-align: center;
    margin: 0px auto;
}
.button2 {
    font-family:MS Shell Dlg 2;
    font-size:8px;
    font-weight:NORMAL;
    margin: 0px auto;
}

Here's a working fiddle to demonstrate.

Upvotes: 1

Related Questions