|
CSS - How Do I Vertically Align Text With An Image?
I am designing this page:
theticketsguide.com/sample Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put vertical-align:middle for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding. Thanks, Brandon Similar TutorialsGreetings, I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done? ok. Ive been trying to use CSS to style my page instead of tables. but I cant get stuff to line up right. basically I have a div spanning the whole width of a css box. inside that div I have 3 sections, one for left-aligned text, one for center aligned text and one for right aligned text. what I want is to display on the far left a left arrow image (for use as a button) and the word 'Previous'. then in the middle of the div, center aligned, I want to display the words 'select a different draw' and on the right hand side, right aligned I want the word 'Next' followed by my right arrow. EASY PEASY I thought. Well it has taken me an hour to realise that I have to set my parent element to position: relative for the left middle and right elements to use absolute without going to the very top of the page. so at least I now have them along in a line. What I have found is that the the text on the left and right is vertically aligned to the BOTTOM edge of the image and the text in the middle has been vertically aligned to the TOP of the image despite all 4 css classes being defined as vertical-align: middle; please tell me where I am going wrong, I'm loosing my marbles here! --html: Code: <div id="width-100"> <div id="third-left"> <img src="images/arrowleft.png" alt="foo"/> Previous </div> <div id="third-middle"> Select a different draw </div> <div id="third-right"> Next <img src="images/arrowright.png" alt="foo"/> </div> </div> --css: Code:
#third-left {
width: 30%;
text-align: left;
vertical-align: middle;
}
#third-middle {
position: absolute;
top: 0px;
margin: 0 35% 0 35%;
width: 30%;
vertical-align: middle;
text-align: center;
}
#third-right {
position: absolute;
top: 0px;
right: 0px;
width: 30%;
text-align: right;
vertical-align: middle;
}
#width-100 {
width: 100%;
position: relative;
vertical-align: middle;
background: white;
}
any thoughts? Thanks, Ben Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it. This is what I want it to look like image link This is what does look like web page link Here is the CSS css link How can I get abosolute vertical placement of the text best for firefox and IE? I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible. Thanks! Hi Guys, I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image. Here's what I have so far. img.top {vertical-align:text-top;} <a href="http://company.com/graphics/thumb.jpg"> <img class="top" src="http://company.com/graphics/thumb.jpg"> </a> <a href="company.com">sample text</a> <a href="company.com">second line</a> Any ideas? I've tried like every switch for the vertical-align property... Hi, I am trying to achieve a layout which uses unordered lists. Within the LI, there is an image and some text. The images are all different heights though. The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind. I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!! Here is what I'm trying to achieve: http://www.joshsphotos.com/user_interface/final_look.gif Here is the HTML at present: http://www.joshsphotos.com/user_interface/ And the CSS: http://www.joshsphotos.com/user_interface/css/style.css Thanks! I am aware of how difficult it is to vertically align text etc using pure css but what is hte best way to do it. For example i want to put some text slap bang into the middle of the screen. Thanks i'm trying to vertically align a div box (the sign in area) so that it sits on top of this grey (soon to be) navigation bar...i've floated the box to the right...i want it to align to the bottom now...can anyone help me? ------> http:// www . u2station . com / index2.php and the stylesheet is at: http:// www . u2station . com /movabletype/mt-static/support/themes/u2station/u2station.css i've basically been trying to radically modify an existing theme that movable type (MT) publishing system created so i can alter it to my specs. any quick help with this simple css adjustment would be extremely helpful...(otherwise i'm thinking of reverting back to old fashioned tables as a last resort). Hello, how do you align vertically a radiobutton with label without using the <br> tag in css? Code: <fieldset>
<legend>Food</legend>
<input name="Password" type="radio" id="p" value="" checked="checked" />
<label>HTML</label> <br />
<input name="n1" type="radio" id="p" value="" />
<label>ASP</label> <br />
<input name="n1" type="radio" id="p" value="" />
<label>Donut</label> <br />
<input name="n1" type="radio" id="p" />
</fieldset>
OK, I have three images: a top, middle, and bottom that need to align vertically. It should look like a typewriter with paper coming out when said and done. You can see what's wrong at csshore(dot)com Here is the css: #top { background:url(images/top.gif) no-repeat; background-position:50%; width: 617px; float:none; margin:0 auto; height: 55px; position: relative; } #container { background:url(images/middle.gif) repeat-y; background-position:center; width: 601px; padding:0; margin:0 auto; height: 100%; position: relative; min-height:600px; } #bottom { background:url(images/bottom.gif) no-repeat; background-position:50%; width: 800px; height:485px; margin:0 auto; position: relative; } .center { background-image:url(images/wood014.jpg); } And the html: <div id="top" class="center"></div> <div id="container" class="center">When in the course of human events, it becomes necessary for a people to through off the reigns of governement and create a new one. </div> <div id="bottom" class="center"></div> Ignore the failed attempt to quote the Declaration of Independence. I have tried everything I know (which admittedly is little) and I can't get them to align. Thanks in advance. What I'm wanting is for the links to be in the middle of the div vertically. Currently it's at the top. I've tried using vertical-align but that doesn't work. What am I missing here? asp.net firefox 3.6.11 CSS Code:
#headercont
{
width:auto;
height:100px;
text-align:center;
background-image:url('images/headbg.png');
}
#connav
{
vertical-align:middle;
}
#connav ul
{
position:relative;
list-style-type:none;
list-style-image:none;
}
#connav li
{
display:inline;
}
#connav ul li a
{
text-decoration:none;
margin: 4px;
padding: 5px 20px 5px 20px;
color:#ccff00;
background-color:#61a003;
}
HTML (inside the body tags) Code: <div id="headercont"> <div id="connav"> <ul > <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you. <div style="width:800px"> <div style="width:730px;border:solid 1px red;float:left;"> LOTS OF CONTENT... MORE THAN 1 LINES </div> <div style="width:50px;float:right;border:solid 1px red;"> CLOSE LINK SHOULD BE HERE LATER </div> <div style="clear:both;"></div> </div> If you go to the page http://electrojams.com/2010/05/03/n...le-some-chords/ you will see at the top of my post the "social sharing" icons... They are all embedded JavaScripts, but how can I align them? The Stumbleupon button is lower than the others... Hi all if you look here -> http://www.prxa.info/gol2/community.php to the right where it has status updates i wish the update itself to align to the top of the avatar images to the left of it? I'm stumped. Cannot find a solution here. Is it possible to vertically align a form field inside a DIV in IE6? It works fine everywhere else. (Big shock...) Thank you for any help you can give. I've resolved to using tables temporarily. Ughhh. Here's a snippet of the CSS: Code: body { background-color: #e2e4d7; background-image: url("../images/fade_top.gif"); background-repeat: repeat-x; margin: 0; padding: 0 }
#wrapper { margin: 12px auto; width: 796px }
#top { background-image: url("../images/main_top.gif"); background-repeat: no-repeat; width: 796px; height: 8px; overflow: hidden; vertical-align: bottom }
#main { background-image: url("../images/main_back.gif"); background-repeat: repeat-y; width: 796px; overflow: hidden }
#header { background-image: url("../images/header_back.gif"); background-repeat: no-repeat; width: 796px; height: 262px }
#nav { margin-right: 8px; margin-left: 8px; width: 780px; height: 60px }
#nav ul { list-style-type: none; margin: 0; padding: 0; width: 780px }
#nav li { float: left }
#nav li a { display: block; padding-top: 60px; height: 0; overflow: hidden }
...
#banner { margin-right: 8px; margin-left: 8px; width: 780px; height: 202px; overflow: hidden }
#bannerLeft { background-image: url("../images/banner_logo.gif"); background-repeat: no-repeat; position: relative; width: 316px; height: 202px; float: left }
#searchBox { line-height: 53px; text-align: center; position: absolute; top: 149px; width: 316px; height: 53px }
#searchField { margin: 0; padding: 0; width: 196px; vertical-align: middle }
#searchButton { margin: 0 0 0 6px; padding: 0; vertical-align: middle }
#bannerRight { background-image: url("../images/banner_photo.jpg"); background-repeat: no-repeat; width: 464px; height: 202px; float: right }
...
And here's a snippet of the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title></title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"/> </head> <body> <div id="wrapper"> <div id="top"></div> <div id="main"> <div id="header"> <div id="nav"> <ul> ... </ul> </div> <div id="banner"> <div id="bannerLeft"> <form action="http://www.google.com/search" method="get"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <input type="hidden" name="domains" value="http://www.whmca.com"> <input type="hidden" name="sitesearch" value="http://www.whmca.com"> <div id="searchBox"> <input id="searchField" type="text" name="q"><input id="searchButton" name="btnG" type="image" src="images/search_bt.gif" alt="Search" height="14" width="42"> </div> </form> </div> <div id="bannerRight"></div> </div> </div> <div id="body"> ... </div> </div> <div id="bottom"></div> <div id="copyright"> ... </div> </div> </body> </html> I have a div with blue background on the page below. It is is currently displaying horitzontally across the screen, with the images inside doing the same. I would like to vertically align it along the right side of the page, next to the text (which would be on the left). I'd also like the 'Property Search' within the blue, aligned below the photo of the house. Can anyone help me out? I'd like to KNOW how to do it and not have someone just send me an updated style sheet. Thanks. Styles attached. http://mulqueenconsulting.com/galese/ How do you vertically align some larger sized text with an image that is floating left inside a div? The image is 152px in height and I set the div height to be 162px so there is padding of 5px around the image. Artoo Hi, I'm fairly new to CSS but I've been enjoying working with it. I've now stumbled onto a problem that is making me tear my hair out. I have a centered, fixed width 2-column design. and I'm trying to insert an image and float it left so that the text in the div wraps around it. The problem is that the image keeps being pushed down to the 3rd or 4th paragraph instead of the actual paragraph it's placed in. What could be causing this? I've included my code below. Thanks! Code:
/*----------PAGE CENTERED AND FLUSH TOP-----*/
*{margin:0px;
padding: 0px;
}
/*---------------BODY BACKGROUND------------*/
body{
background-color:#333333;
}
/*-----------BACKGROUND-CONTAINER-----------*/
#background-container{
width: 780px;
background-color:white;
margin: 0px auto;
padding-top:0px;
padding-bottom:0px;
font-family:Arial;
font-size:10pt;
}
/*-------HEADER ELEMENTS----------*/
#banner{
width: 780px;
height: 200px;
background-color:#CC9900;
background-image:url();
border-bottom: 5px solid #333333;
}
#header{
width:770px;
background-color:#FFFFFF;
background-image:url(vertical-scanline.jpg);
padding-left:10px;
font-family: Arial;
font-size:29px;
font-weight: bold;
}
/*-----------BEGIN DROP-DOWN MENU--------*/
div#listmenu{
background-color:#860505;
font: 10pt Arial;
float:left;
width:780px;
margin: 0px auto;
}
div#listmenu ul{
margin: 0 0 0 30px;
}
*html div#listmenu ul{
float:left;
border-left: 1px solid gray;
margin-left:15px;
}
*html a{display:block;
color:#FFFFFF;}
div#listmenu li{
float:left;
position:relative;
background-color:#860505;
list-style-type:none;
padding: 0 6px;
border-right:1px solid black;
}
div#listmenu ul li ul{
margin: 0px;
position:absolute;
width:10em;}
div#listmenu ul li ul li{
width:100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
div#listmenu li{first-child:
border-left: 1px solid black;
}
div#listmenu ul li ul li {first-child:
border-top: 1px solid gray;
}
div#listmenu a{
text-decoration:none;
font-weight:bold;
color:#ffffff;
display:block;
padding: 0 6px;
background-color:#860505;
}
div#listmenu a:hover{
background-color:#FFFFFF;
color:#000000;
}
body div#listcontainer ul li ul {display:none;}
div#listcontainer ul li:hover ul {
display:block;
}
div#listcontainer ul li:hover ul, div#listcontainer ul li ul:hover {display:block;
z-index:25;
}
/*-----------END DROP-DOWN MENU--------*/
/*-----CLEARING ELEMENT BEGIN---------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*-----CLEARING ELEMENT END---------*/
/*--------------MAIN CONTENT---------*/
#main-container{
background-color:#ffffff;
}
/*----------COLUMNS--------*/
#sectionright{
width:190px;
background-color:#860505;
border-bottom: 5px solid #333333;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-indent:20px;
float:right;
}
#rightcol{
width:190px;
background-color:#CCCCCC;
font-family:"Arial";
color:#000000;
font-size:12px;
text-align: left;
text-indent:20px;
border-bottom: 5px solid #333333;
padding:0px;
float: right;
clear:right;
}
#subscription{
width: 190px;
background-color:#CC9900;
border-bottom: 5px solid #333333;
font-family:Arial;
text-align:left;
font-size:10px;
margin-bottom:3px;
float: right;
clear:right;
}
#crisp{
width:190px;
height:150px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
font-family:"Arial";
color:#000000;
font-size:11px;
text-align:left;
float:right;
clear:right;
margin-bottom:3px;
}
#logo{
width:190px;
height:90px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
float: right;
clear:right;
}
#left-floater{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#floater-bottomleft{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#bottom{
width: 675px;
clear:right;
background-color:#FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}
#footer{
height:15px;
width: 780px;
background-color:#999999;
font-family:"Arial";
font-size:10px;
text-align:center;
margin-top:5px;
clear:right;
}
/*-----------BODY ELEMENTS-------*/
.subheader{
background-color:#D1A10D;
font-family:"Arial";
font-size:19px;
font-weight: bold;
text-align:left;
text-indent:5px;
padding-top:5px;
padding-bottom: 2px;
}
.pagesub{
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
font-weight: bold;
color:#860505;
text-align:left;
margin-top:5px;
margin-bottom: 5px;
}
.column-title{
width: 190px;
font-family:Arial;
color: #000000;
font-size: 14px;
font-weight:bold;
text-align: center;
}
div#main-container img {
float:left;
border: 1px solid #333;
}
/*------PARAGRAPH PROPERTIES-----*/
.p-main{
width:560px;
margin-left:5px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
font-size:10pt;
}
ul{
padding-left:15px;
list-style:none;
}
.pcolumn{padding-left: 40px;}
.p-ul{font:10pt Arial;}
.ptop{margin-bottom:5px;}
/*----------------LINK PROPERTIES--------------*/
a:link{color:#000000; background-color:transparent;}
a:visited{color:#CC0000; background-color:transparent;}
a:active{color:#000000; background-color:transparent;}
/*-----------RIGHT COL AND CRISP LINK PROPERTIES----*/
div#rightcol a:link{color:#000000; background-color:transparent;}
div#rightcol a:visited{color:#CC0000; background-color:transparent;}
div#rightcol a:active{color:#000000; background-color:transparent;}
div#crisp a:link{color:#000000; background-color:transparent;}
div#crisp a:visited{color:#CC0000; background-color:transparent;}
div#crisp a:active{color:#000000; background-color:transparent;}
/*------HTML BELOW-----*/
<body>
<div id= "background-container">
<div id="listmenu">
<div id="listcontainer" class="clearfix">
<ul>
<li><a href="http://www.crge.umd.edu">Home</a></li>
<li><a href="#">Who We Are</a><ul>
<li><a href="#">Director's Message</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Funders</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</li>
<li><a href="#">Research</a>
<ul>
<li><a href="#">Research Program Areas</a></li>
<li><a href="#">Research Interest Groups</a></li>
<li><a href="#">CrISP Research Training Program</a></li>
<li><a href="#">Intersectional Research Database</a></li>
</ul>
</li>
<li><a href="#">Publications</a>
<ul>
<li><a href="#">Research Connections 2007</a></li>
<li><a href="#">Research Action Briefs</a></li>
<li><a href="#">Campus Report</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">Professional Opportunities</a></li>
<li><a href="#">Alternative News Sources</a></li>
<li><a href="#">Tools from Graduate Colloquium</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Graduate Colloquium</a></li>
<li><a href="#">QRIG Seminars</a></li>
<li><a href="#">MC/VC Series</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul><li><a href="">Press Releases</a></li></ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="header">The Consortium on Race, Gender and Ethnicity: CRGE</div>
<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="200">
<param name="movie" value="CRGEbanner.swf">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="CRGE%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="200"></embed>
</object>
</div>
<div id="sectionright">Who We Are</div>
<div id="rightcol"><p class="p-right"><b>In This Section</b></p>
<p><ul>
<li><a href="http://www.crge.umd.edu/about.html" target="_blank">Director's Message</a></li>
<li><a href="http://www.crge.umd.edu/staff.html" target="_blank">Staff</a></li>
<li><a href="http://www.crge.umd.edu/faculty.html" target="_blank">Faculty</a></li>
<li><a href="http://www.crge.umd.edu/funders.html" target="_blank">Funders</a></li>
<li><a href="http://www.crge.umd.edu/affiliates.html" target="_blank">Affiliates</a></li>
</ul></p>
<br>
<br>
</div>
<div id="subscription">
<form method="post" action="http://www.emailmeform.com/fid.php?formid=35482">
<INPUT TYPE=hidden NAME=FCode VALUE="8gdrzytp">
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#CC9900">
<tr>
<td>
<font face="Arial" size="2" color="#000000">Subscribe to CRGE's Listserv</font>
<div style="" id="mainmsg"> </div>
</td>
</tr>
</table>
<br>
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr valign="top">
<td nowrap><font face="Arial" size="2" color="#000000">Name</font></td>
<td>
<input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td>
</tr>
<tr valign="top">
<td nowrap><font face="Arial" size="2" color="#000000"> Email</font></td>
<td>
<input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Subscribe" name="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="logo"><p align="center"><img src="umlogo.gif"></p></div>
<div id="main-container">
<p class="subheader">Director's Message</p>
<p class="p-main"><img src="btdill2.jpg" width="150" height="175" />Welcome to the Web site for the Consortium on Race, Gender and Ethnicity.</p>
<p class="p-main">The Consortium is an association of academic units and individual faculty on the University of Maryland campus whose mission is to promote, advance, and conduct research, scholarship, and faculty development that examines the intersections of race, gender, and ethnicity with other dimensions of difference.</p>
<p class="p-main">Established in 1998 with support from the Colleges of Arts and Humanities, Behavioral and Social Sciences, the Graduate School, and the Office of the Provost, the Consortium seeks to: support, coordinate, and facilitate the activities of the many outstanding faculty and academic units at Maryland engaged in scholarship that focuses on intersections of race, gender, and ethnicity; and to build visibility both on and off-campus for our exceptional wealth of resources.</p>
<p class="p-main">Through our affiliates, community partners, and research interest groups, we encourage an intellectual climate that supports collaboration. Through our Research Program Areas, we promote approaches that contextualize the lives and experiences of the individuals and groups that participate in our research. Through this Web site and other dissemination efforts, we develop applications of knowledge to human problems. Through a variety of research training opportunities we seek to transfer intellectual capital to upcoming generations.</p>
</div>
<div id="footer"><p>Home | Who We Are | Research | Publications | Resources | Events | Media | Contact Us</p></div>
</div>
</body>
I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan |
|||||||