Jump to content

Vertical alignment - I give up


boylesg

Recommended Posts

How do you make this pain in the arse image vertical align?

 

I can get horizontal alignment in the middle but I can get vertical alignment in the middle.

div id="CategoryContainer">    <a id="Category" href="Category.php">        <img id="CategoryContainerImage" width="100" width="100px" src="image.jpg" />    </a>    <div id="CategoryName">Category</div></div>These styles are in a the file style.css	#CategoryContainerImage{		border-style:none;	    border-radius:20px;		display:block;		position:relative;		margin-left:auto;		margin-right:auto;		vertical-align:middle;	}			#CategoryContainer{		behavior: url(CSSPie/PIE.htc);		display:table-cell;		float:left;		width:140px;		height:140px;		margin:40px 0px 40px 40px;		vertical-align:middle;		line-height:135px;		border-style:none;		border-color:#000099;		border-width:thin;	    border-radius:30px;	}		#CategoryName{		behavior: url(CSSPie/PIE.htc);		border: thin solid #000099;		display:block;		position:relative;		background-color:white;		color:#000099;		font-family:"<?php echo $_SESSION["ContentsFont"]; ?>";		font-size:medium;		height:60px;		width:130px;		line-height:30px;		vertical-align:middle;		text-align:center;		top:10px;	}		#Category{		behavior: url(CSSPie/PIE.htc);		display:block;		background-color:#000099;		width:130px;		height:130px;		line-height:130px;		border-style:solid;		border-width:medium;	    border-radius:30px;	    border-style:solid;	    border-top-color:#3131FF;	    border-left-color:#3131FF;	    border-bottom-color:#00004D;	    border-right-color:#00004D;		vertical-align:middle;	}	
Link to comment
Share on other sites

Setting the line-height to 140px will work, but only if everything is on the same line. If it's not, then you can put it inside another container.

 

HTML

<div id="CategoryContainer">    <div class="InnerContainer">        <a id="Category" href="Category.php">            <img id="CategoryContainerImage" style="width:100px" src="image.jpg" />        </a>        <div id="CategoryName">Category</div>    </div></div>

CSS (only relevant properties shown here)

#CategoryContainer {    height: 140px;    line-height: 140px;}.InnerContainer {    display: inline-block;    line-height: normal;    vertical-align: middle;}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...