SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    vertically centering a set of elements

    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

    HTML Code:
    <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>
    Code CSS:
    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?
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried using the clear style? I tried that and it stacked them vertically.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    HTML Code:
    <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>
    Code CSS:
    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");
    }
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  5. #5
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    HTML Code:
    <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>
    Code CSS:
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •