I am trying to center vertically some anchors but have not been able to mange it, the anchors are inside a div which is centered horizontally and taking up all the height of the body, what I want is have these anchors centered within that div
<body>
<div id="teatro_intimo_botones">
<a class="contacto" href="#"></a>
<a class="quienes_somos" href="#"></a>
<a class="obras" href="#"></a>
<a class="proximos_eventos" href="#"></a>
</div>
</body>
body {
background-color: #080000;
margin: 0;
padding: 0;
}
#teatro_intimo_botones {
margin-left: auto;
margin-right: auto;
width: 362px;
}
#teatro_intimo_botones a {
display: block;
height: 131px;
width: 181px;
float: left;
}
.contacto {
background-image: url("contacto.png");
}
.quienes_somos {
background-image: url("quienes_somos.png");
}
.obras {
background-image: url("obras.png");
}
.proximos_eventos {
background-image: url("proximos_eventos.png");
}
I tried using a percentage, but then it will not show properly on all screens, is there a way to center those vertically?
zeeb44
December 20, 2011, 5:27am
2
Have you tried using the clear style? I tried that and it stacked them vertically.
yes it does stack them vertically, but I do not want them stacked vertically, basically what I am trying to achieve is have 2 on each row, I now managed to get it working somewhat but I am not really convinced because if the screen is too small then the content gets cut off
here is what I have done so far but as I mentioned in the previous post the content gets cut off when the screen does not have enough space, also it is not really centered
<body>
<div id="teatro_intimo_botones">
<div id="vert">
<a class="contacto" href="#"></a>
<a class="empty" href="#"></a>
<a class="quienes_somos" href="#"></a>
<br/>
<a class="empty" href="#"></a>
<a class="obras" href="#"></a>
<a class="empty" href="#"></a>
<br/>
<a class="proximos_eventos" href="#"></a>
</div>
</div>
</body>
body {
background-color: #080000;
margin: 0;
padding: 0;
}
#teatro_intimo_botones {
margin-left: auto;
margin-right: auto;
width: 543px;
}
#teatro_intimo_botones a {
display: block;
height: 131px;
width: 181px;
float: left;
}
#vert {
position:absolute;
top:50%;
margin-top:-197px;
}
.contacto {
background-image: url("contacto.png");
}
.quienes_somos {
background-image: url("quienes_somos.png");
}
.obras {
background-image: url("obras.png");
}
.proximos_eventos {
background-image: url("proximos_eventos.png");
}
well, I decided to change the whole thing, I created a table and was able to center that on the screen, here is what I did
<body>
<div id="teatro_intimo_botones">
<div id="vert">
<table>
<tr>
<td><a href="#"><img src="contacto.png" /></a></td>
<td></td>
<td><a href="#"><img src="quienes_somos.png" /></a></td>
</tr>
<tr>
<td></td>
<td><a href="#"><img src="obras.png" /></a></td>
<td></td>
</tr>
<tr>
<td><a href="#"><img src="proximos_eventos.png" /></a></td>
</tr>
</table>
</div>
</div>
</body>
body {
background-color: #080000;
margin: 0;
padding: 0;
}
#teatro_intimo_botones {
margin-left: auto;
margin-right: auto;
width: 557px;
}
#vert {
position:absolute;
top:50%;
margin-top:-211px;
}
#vert table tr td {
height: 131px;
width: 181px;
}
if anyone knows a better way to do it please let me know
PaulOB
December 20, 2011, 11:35am
6
Hi,
If its just a block of 4 fixed height images the you can do it like this and it won;t slide off the screen like your table version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal and vertical centerl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
body { text-align:center; }
#vertical {
float:left;
height:50%;
margin-top:-133px;/* half vertical height*/
width:100%;
}
#hoz {
width:366px;
margin:0 auto;
padding:0;
list-style:none;
height:266px;
overflow:auto;/* allow content to scroll inside element if needed */
text-align:center;
clear:both;
}
#hoz a {
height: 131px;
width: 181px;
float: left;
border:1px solid #000;
background:red;
line-height:131px;/* not needed - just for effect*/
}
</style>
</head>
<body>
<div id="vertical"></div>
<ul id="hoz">
<li><a class="contacto" href="#">1</a> </li>
<li><a class="quienes_somos" href="#">2</a></li>
<li><a class="obras" href="#">3</a></li>
<li><a class="proximos_eventos" href="#">4</a></li>
</ul>
</body>
</html>