Member Avatar for Ivan_7

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
  • 191 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for diafol

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.

Member Avatar for rtrethewey

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.

Member Avatar for Ivan_7

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
Member Avatar for diafol

That's not centering as we know it, that "middling"! Read up on vertical alignment.

Member Avatar for gentlemedia

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
Member Avatar for gentlemedia

In case you need or want to support IE8 and below, you could use this CSS for the img instead.

.square img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

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

commented: nice demo +15
Member Avatar for Grilly

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

Member Avatar for gentlemedia

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.