|
CSS - Vertically Align Text Within A Block
Greetings,
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? Similar TutorialsHi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! 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 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 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>
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). 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 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... 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> 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. 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> 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/ I have a custome bullet for an LI...my issue is...when this displays, the bullet displays at the top of the line height. Is there a way to adjust this so that the bullet appears in center of the line height? Set margin:0px; For the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed. I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at: Code: http://www.outincenterfield.com/mt/ Two things I need to figure out: 1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer) 2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through. Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things. Here's the main CSS: Code: /*
THEME NAME: Diurnal
THEME URI: http://ntuat.wordpress.com/
DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day
VERSION: 1.0
AUTHOR: Carolyn Smith
AUTHOR URI: http://not-that-ugly.co.uk/
TEMPLATE: sandbox
*/
/* use any structure in /sandbox-layouts; more details in the readme*/
/* included here for Movable Type */
/* links to time-specific stylesheets */
@import url('sunrise/style.css');
@import url('morning/style.css');
@import url('afternoon/style.css');
@import url('sunset/style.css');
@import url('night/style.css');
div#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
div#content {
margin: 0 400px 0 0;
}
div.sidebar {
float: left;
overflow: hidden;
width: 180px;
}
div#primary {
margin: 0 0 0 -400px;
}
div#secondary {
margin: 0 0 0 -200px;
}
div#footer {
clear: left;
width: 1000px
}
body {font: 0.75em arial, helvetica, verdana, sans-serif;
margin:0;
padding:0;
color:#444}
#container {background:#fff;}
#content {
padding:0 10px 0 10px}
/* header */
#header {height:200px;}
#header h1 {font:3em 'century gothic', futura, serif;
margin:0;
padding: 0 10px 0 10px;}
#blog-description {padding:7px 10px 0px 10px;
color:#fff}
.skip-link {display:none}
/* prev/next links */
.navigation {margin:1em;
text-align:center;
width:95%;
height:1em}
.nav-previous {float:left;
text-align:left;
width:45%}
.nav-next {float:right;
text-align:right;
width:45%}
.nav-previous a {padding-left:20px;
background:url(leftarrow.gif) center left no-repeat;}
.nav-next a {padding-right:20px;
background:url(rightarrow.gif) center right no-repeat;}
span.meta-nav {display:none}
/* page navigation */
#menu ul li {
margin:0;
padding:0;
display:inline;
font:1.2em 'century gothic', futura, sans-serif;
}
#menu ul li ul {margin:0;
display:inline;
font-size:0.8em;
}
#menu ul li a {
padding: 3px 20px 3px 10px;
letter-spacing:0.05em;
}
/* sidebar stuff */
.sidebar {margin:0;
padding: 10px;
background:#fff}
.sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em;
margin:0;
padding:7px 10px 3px 20px;
font: 1.4em 'century gothic', futura, sans-serif}
#menu ul, .sidebar ul {list-style:none;
margin:0;
padding:0;}
.widget, .sidebar li.linkcat {border:1px #ccc solid;
margin-bottom:2em;}
.sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;}
.sidebar h3 {border:1px #ccc solid;}
.sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb;
border:0;
padding:3px 10px 3px 10px;}
.sidebar ul li ul li ul li {
padding-left:20px;
background:url(rightarrow.gif) center left no-repeat;}
/* posts & comments */
.post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid;
margin:10px 0 10px 0}
.entry-title, .comment-author {letter-spacing:0.05em;
margin: 0;
background:#f0f0f0 url(greybk.png) top left repeat-x;
padding:5px 10px 0px 10px;
font: 2em 'century gothic', futura, sans-serif}
abbr.published {border:0;}
.entry-date, .comment-meta, #trackbacks-list div.comment-author {
text-transform:uppercase;
font-size:0.9em;
margin:0;
background:#f0f0f0;
padding:0px 10px 5px 10px;}
.entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat;
padding-left:20px}
#trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif;
border-bottom:1px #ccc solid;
letter-spacing:0em;
padding-top:5px}
.comment-meta {border-bottom:1px #ccc solid;}
.comment p, #trackbacks-list p {padding:0px 10px 0px 10px;
background:#fbfbfb;}
.entry-content {line-height:1.4em;
padding:10px;
background:#fbfbfb;
border-top:1px #ccc solid;
}
.entry-meta{
clear:both;
background:#f0f0f0;
border-top:1px #ccc solid;
padding:5px 10px 5px 10px}
.meta-sep {padding-left:18px;
color:#f0f0f0;}
li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x}
/* forms */
input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;
color:#444;
font:1em arial, helvetica, verdana, sans-serif;
overflow:auto}
#commentform #submit {margin:10px 0 10px 0;
color:#333}
#searchform div{background:#f0f0f0;
margin:10px}
#searchform submit {color:#333}
/* calendar */
#calendar h3 {display:none}
div#calendar_wrap {padding:0;
background:#f0f0f0 url(greybk.png) top left repeat-x;}
#wp-calendar {width:100%;
background:#fbfbfb;}
#wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif;
margin:0;
padding: 5px 0px 5px 20px;
text-align:left
}
#wp-calendar td {text-align:center;
border:#ccc 1px solid;
background:#f0f0f0 url(greybk.png) repeat-x;}
#wp-calendar tfoot td {
background:#fbfbfb;
border:0;
}
#wp-calendar td.pad {border:0;
background:#fbfbfb}
td#today {
background:#ccc;
border:#999 1px solid}
/* image handling */
#content img {max-width:98%;}
#content, .sidebar {overflow:hidden}
a img {border:0}
.alignright {
float:right;
margin:5px}
.alignleft {
float:left;
margin:5px}
.center {
margin:auto;
display:block;
}
/* getting asides to LOOK like asides */
body.home div.category-asides {
margin:20px 0px 20px 0px;
padding:5px 10px 5px 10px}
body.home div.category-asides *{
display:inline;
}
body.home div.category-asides .entry-content {border:0;
font-size:1em;
line-height:1.5em;
padding:0}
body.home div.category-asides div.entry-meta {background:#fbfbfb;
margin:0;
border:0
}
body.home div.category-asides .entry-title,
body.home div.category-asides .entry-date,
body.home div.category-asides .author,
body.home div.category-asides .meta-sep,
body.home div.category-asides .cat-links
{display:none}
/* html elements */
a {text-decoration:none}
blockquote {border:1px #ccc solid;
padding:5px}
h2 {font: 2em 'century gothic', futura, sans-serif;
margin:10px 0 -10px 0;
}
.hentry ul {list-style-image:url(rightarrow.gif)}
#footer {
background:#f0f0f0 url(greybk.png) repeat-x;
text-align:center;
border-top:#ccc 1px solid;
padding:10px 0 10px 0;
}
I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties: #gNav { width:768px; height:19px; text-align:left; vertical-align:middle; } i need for the three text links to line up directly in the middle (vertically) of that <div>. To achieve this in IE6 and NN+, I attach the following style to the text. .nookum { font-size:.9em; vertical-align: 25%; color:#FFFFFF; } I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>. Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE? How to get a text aligned vertically in a css button? EDIT: no longer required All the text is at the top of the menus, how do i get them so they are in the center of the divs ? Code:
#navbar2 { float:right; position:relative; }
ul.menu2 { list-style-type:none; margin:0; padding:0; }
#navbar2 .leaf2 { width:70px; height:35px; float: left; display: inline; list-style-type:none; display:inline; text-align:center; color:#F7941D; font-weight:bold; font-size:12px; background-color:#2E2E2E; margin-left:8px; border-top-left-radius: 5px; border-top-right-radius: 5px; opacity:0.85; filter:alpha(opacity=85); }
#navbar2 li:hover, #navbar2 li.active { opacity:1; filter:none; }
#navbar2 li a { width:70px; height:35px; display:block; padding-top:3px; }
.leaf2 a { width:70px; }
Code:
<div id="navbar2">
<ul class="menu2">
<li class="leaf2<? if ($activePage=="home") {?> active<? } ?>"><a href="." title="Home">home</a></li>
<li class="leaf2<? if ($activePage=="item2") {?> active<? } ?>"><a href="2.php" title="2">item<br>2</a></li>
<li class="leaf2<? if ($activePage=="item3") {?> active<? } ?>"><a href="3.php" title="3">item<br>3</a></li>
<li class="leaf2<? if ($activePage=="item4") {?> active<? } ?>"><a href="4.php" title="4">item4</a></li>
<li class="leaf2<? if ($activePage=="item5") {?> active<? } ?>"><a href="5.php" title="5">item5</a></li>
</ul>
</div>
|
|||||||