0

Hi , I try to creat Chess table in HTML , I use DIV to create Content.... I create everything , and as always I have only one problem and that is I cant put my figures in center I try everything <center> , align="center", but nothing.

<html>
<head>
    <title>Chess table</title>
<style>

 body {
   background-color:grey;

 }


#Content  {
    width:962px;
    height:1000px;
    background-color:#EFEFC9;

}

#a1 {

   width:120px;
   height:100px;
   background-color:#1D1D1D;
   float:left;
}
#a2 {
   width:120px;
   height:100px;
   background-color:white;
   float:left;

}
#a3 {
   width:120px;
   height:100px;
   background-color:#1D1D1D;
   float:left;
}
#a4 {
   width:120px;
   height:100px;
   background-color:white;
   float:left;
}
#a5 {
   width:120px;
   height:100px;
   background-color:#1D1D1D;
   float:left;
}
#a6 {
   width:120px;
   height:100px;
   background-color:white;
   float:left;
}
#a7 {
   width:120px;
   height:100px;
   background-color:#1D1D1D;
   float:left;
}
#a8 {
   width:120px;
   height:100px;
   background-color:white;
   float:left;
}

</style>
<body>


<div id="Content">

<div id="a1">
 <img src="figure/a1.png">
 </div>

  <div id="a2">
<img src="figure/a2.png">
 </div>
<div id="a3">
<img src="figure/a3.png">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
5
Contributors
8
Replies
45
Views
2 Years
Discussion Span
Last Post by gentlemedia
0

I can't see this working the way you want it to. Use:

margin: 0 auto;

for the content. You may need to set the html and body to 100% width too.

0

Your HTML really only seems to show one row of your chessboard, so it's hard to suggest a precise solution beyond setting the CSS rule (or 'style' attribute) of each square's <div> to 'text-align:center'. That will center the <img> horizontally. You could also add 'vertical-align:middle' to help with vertical centering, but you might find that the easiest solution is to size your images to the full size of the squares and rely on a transparent background to allow the "board" colors to show through.

0

This is my problem , I create text-align:center; but still my figures is not in "center", I need it to be like A2 figure (with background-color:white)

figure_problem.png ![figure_problem.png]

Edited by Ivan_7

0

Indeed! Text-align: center will only center the chess piece inages horizontally. If you want them vertically in the middle as well, you could use this neat trick, but it doesn't work in IE8 and below. You don't need text-align: center with this either by the way. And the square (#a1, etc) needs to have position: relative. It's a better to create e a class square, because you're repeating properties unnecessary.

here's a demo: http://cssdeck.com/labs/full/i8rjw1vv

<div id="a1" class="square">
    <img src="figure/a1.png">
</div>

.square {
    position: relative;
    width: 120px;
    height: 100px;
    float: left;
}

.square img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

Edited by gentlemedia

0

You could also use display:table-cell (inside of an element with display: table;) and vertical-align: middle

0

I was aware of that method too, but my first thought was why wrapping the 8 squares in two extra div's (a div set to display: table and a div set to display: table-row), while this is not necessary if we use position: absolute to center the img's.
https://css-tricks.com/almanac/properties/d/display/#display-table

Well... it turns out you don't need the two extra div's in order to set .square to display: table-cell It just works without (well at least in Chrome on the Mac). I didn't know that!

.square {
    width: 120px;
    height: 120px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

Demo: http://cssdeck.com/labs/full/kb4rwbl8

So... this method has the least amount of CSS, so I would go for this one :)

Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.