All good mood, well, here I have with the mood is not very. because it is impossible to place the div in the center.

Found in the internet several ways to do this. on the example, everything works, but in my case I don’t want it in any way. <br/> I can not understand what is wrong.

<td class="leftCol"> <div class="centrirov" arrow="firstArrow" align="center"><div class="text" >Text</div></div> <div class="centrirov" arrow="secondArrow"><div class="text"> Text </div> </div> <div class="centrirov" arrow="thirdArrow"><div class="text"> Text </div> </div> <div class="centrirov"arrow="fourthArrow"><div class="text"> Text </div> </div> </td>

Styles

 #middle .leftCol{ width:700px; padding-left:20px; position:relative; border:1px solid #000; } #middle .leftCol .centrirov .active{ width:144px; height:110px; background:url(/i/buttonActive.png) no-repeat; /*margin-top:-6px;*/ color:#fff; cursor:pointer; display:table-cell; vertical-align:middle } .enabled{ cursor:pointer; } #middle .leftCol .centrirov .active .text{ color:#fff; } #middle .leftCol .centrirov .text{ background:none; display: inline-block; vertical-align: middle; } #middle .leftCol .centrirov { background:url(/i/button.png) no-repeat; width:129px; height:100px; float:left; margin-right:28px; text-decoration:none; color:#bebcbc; font-size:20px; text-align:center; display: table-cell; vertical-align: middle; }

3 answers 3

Such a bulky code, for such an example. I do not want to raziratsya what and where you need to align. In general here: for leveling divas with a fixed width

 div.center { width: 700px; margin: 0px auto; }
  • <div class = "text"> Text </ div> should be centered leftCol div - murad30
  • 2
    and independently from the given answer you will not extract the solution? = \ - ikoolik

I can not understand what is wrong.

Not so here

 #middle .leftCol .centrirov { ... float: left; display: table-cell; ... }

These properties do not fit!

Decision:
From the style for #middle .leftCol .centrirov you need to remove

 display: table-cell; vertical-align: middle;

Each div.text wrap in another div and set this div 'wu style

 #middle .leftCol .centrirov > div { width: 129px; height: 100px; display: table-cell; vertical-align: middle; }

PS:
Whoever did not understand, the brow needed a vertical alignment of div.text .

    <div class="text" align='center'> - why not?

    • Because it is invalid at least. And it does not work everywhere. - Sh4dow
    • Yes, this method does not work, and did not find a normal full-fledged way to solve this problem - murad30