CODEWITHSUNDEEP
cssimagecenter
user1685794
user1685794

Reputation:

CSS centering multiple images/elements

I would like to center the following 2 buttons side by side rather than underneath one another. Here is an example of how it is looking at the moment on JS Fiddle

Could you advise me the best way to handle this? Any help is really appreciated.

Upvotes: 2

Views: 2897

Answers (3)

Dipak
Dipak

Reputation: 12190

JSFiddle

<div>
  <a class="button">Test</a>
  <a class="button">Test</a>
</div>

div{ text-align: center; }
a.button {
     display: inline-block;
     padding: 3px 10px 3px 10px;
     width:50px;
     margin-left:auto;
     margin-right:auto;
     text-align: center;
     color: #636363;
     text-decoration: none;
     border-top: solid 1px #ccc;
     border-left: solid 1px #ccc;
     border-bottom: solid 1px #ccc;
     border-right: solid 1px #ccc;
}

a.button:hover  {
     color: #179FD9;
}

Upvotes: 0

OctoD
OctoD

Reputation: 361

add a container with fixed width and margin 0 auto;

http://jsfiddle.net/2ws9r/13/

hope it helps

Upvotes: 1

sandeep
sandeep

Reputation: 92803

Define display:inline-block to your anchor tags & define text-align:center to it's parent. Write like this:

a.button {
     display:inline-block;
     *display:inline;/* For IE7 */
     *zoom:1;/*For IE7*/
     padding: 3px 10px 3px 10px;
     width:50px;
     margin-left:auto;
     margin-right:auto;
     text-align: center;
     color: #636363;
     text-decoration: none;
     border-top: solid 1px #ccc;
     border-left: solid 1px #ccc;
     border-bottom: solid 1px #ccc;
     border-right: solid 1px #ccc;
}

.parent{
    text-align:center;
}

HTML

<div class="parent">
    <a class="button">Test</a>
    <a class="button">Test</a>
</div>

Check this http://jsfiddle.net/2ws9r/11/

Upvotes: 1

Related Questions