boylesg Posted September 3, 2014 Share Posted September 3, 2014 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 More sharing options...
Ingolme Posted September 3, 2014 Share Posted September 3, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now