|
HTML - Center Some Text On A Line
I am trying to do something pretty basic, but I dont understand the behavior or how to fix it.
I want something to look like (where the '*' are centered): Code: *
*
test *
*
*
*
and am using the code: Code: <CENTER>*</CENTER> <CENTER>*</CENTER> test<CENTER>*</CENTER> <CENTER>*</CENTER> <CENTER>*</CENTER> <CENTER>*</CENTER> But the output looks like: Code: *
*
test
*
*
*
*
Similar Tutorialshere is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. hey guys, In order to align text isnt the command something like this? <h3 align="center">Text Here</h3> Is this right? I know its something really simple just for some reason I cannot get my text to center in the webpage. Any suggestions? Many thanks in advance! Hello everyone, would someone please help me with just vertically centering the text within the box that says "This page was last updated on Monday, May 16, 2011 @ 10:39 AM" it's for my site located @ http://www.trillionaireme.com Here is my CSS code: Code: body {background-color:#ffffff;border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
h1 {background-color:#f5f5f5;font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
h2 {font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
p {font-size:11px; color:grey; font-family:arial;}
p.bordertop {border-style:solid;border-width:5px;border-color:gray;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
p.borderbottom {border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
IMG.displayed {display:block; margin-left:auto; margin-right:auto;}
a:link {color:grey; text-decoration:none;}
a:visited {color:grey; text-decoration:none;}
a:hover {color:#c0c0c0; text-decoration:none;}
a:active {color:#c0c0c0;text-decoration:none;}
div.page {width:920px;padding:0px;border:0px;margin:0px auto;}
div.logo {width:200px;padding:0px;border:0px;margin:0px auto;}
div.topleftbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:20px;left:1px;font-size:11px;color:grey; font-family:arial;}
div.topmiddlebox {text-align: center;width:375px;height:25px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:270px;font-size:11px;color:grey;font-family:arial;text-align:center;margin-}
div.toprightbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:394px;font-size:11px;color:grey;font-family:arial;text-align:right;}
My html code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><title>TrillionaireMe</title><link rel="shortcut icon" href="images/trillionaireme.ico"> <head><link rel="stylesheet" type="text/css" href="trillionaireme.css" /></head><body> <h1> </h1><div class="logo"><a href="http://www.trillionaireme.com"> <img class="displayed" src="http://www.trillionaireme.com/images/trillionaireme.jpg" width="196" height="233" border="0" /></a></div> <h1> </h1> <p class="borderbottom"> </p> <div class="page"><h2> <a href="http://www.trillionaireme.com/fitness.html">Fitness</a> <a href="http://www.trillionaireme.com/nutrition.html">Nutrition</a> <a href="http://www.trillionaireme.com/money.html">Money</a> <a href="http://www.trillionaireme.com/relationships.html">Relationships</a> <a href="http://www.trillionaireme.com/parenting.html">Parenting</a> <a href="http://www.trillionaireme.com/music.html">Music</a> <a href="http://www.trillionaireme.com/literature.html">Literature</a> <a href="http://www.trillionaireme.com/you.html">You</a> <a href="http://www.trillionaireme.com/them.html">Them</a> <a href="http://www.trillionaireme.com/vision.html">Vision</a></h2> </div> <div class="page"> <div class="topleftbox">This is the top left box. <div class="topmiddlebox">This page was last updated on Monday, May 16, 2011 @ 10:39 AM <div class="toprightbox">This is the top right box. </div></div></div></div> </body></html> I have found out that the <center> tag </center> is now obseolete eventhough broswers still display it. I was wondering on how i go about centering text so that it does validate according to xhtml standards. Thanks. when i center the search and quick link box at the top using a line height of 100.... it pushes the header image down 12px's... and spaces the header from the body of the page... any fix? http://www.pzproductions.com/home Hey everyone and thanks ahead of time for takin a look see at this! I'm working on creating a headline for one of my pages that I want to have some sort of 'text' decoration on each side of it like this: -----[blah blah]------ Now I want the title ('blah blah' in this case) to be in a <h1> tag...but not the decoration on the outside. However when I set it up like: Code: ----[<h1>blah blah</h1>]---- As you would guess the result is: -----[ Blah Blah -----] Is there someway I can keep these inline, but still have an <h1> tag wrapped only around the title? THANKS!! Hi all, I have the following code... <BODY> <ul> <li><h3> hello world</h3> I love you </li> </ul> </BODY> Right now this comes out on two separate lines. Is it possible for both texts to be on the same line? Thanks. http://credmond8.awardspace.com/home.phtml How can I get "Site Theme" and "Time" on the same line? please, check http://members.dodo.com.au/~rouslan/...ite/index.html I need to know how to get rid off strange effect down the bottom and how do I make text and image aligned on the same "line", "level" e.g. image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text Hi guys, can someone help me. I'm trying to get my text to sit like this: however it sits like this: www.studioeighty.co.uk thanks Steve Hi, I am writing various things on one line - such as Previous, Back to Main Menu and Next - but would like to align the differently e.g. I would like "previous" to be aligned to the left of the page, "back to Main Menu" in the middle and "Next" on the right side. I have tried pressing space bar - but am only able to do one space in Dreamweaver. Any ideas? Thanks. Hi, I am doing a small project. In that I am displaying percentage visually with the help of horizontal line using width. when the user places cursor on that line, is there any chance to show percentage of that line. Eagerly waiting for your replies. Thanks in advance, Hi, I want to create a header (<h1>,<h2>,...) like on the picture (see attachment) with html and css. It is possible to create sth like that without using pictures? Thanks Hi I am having trouble on this topic, can't think of a way to clearly explain this so i ll just throw an example: I'm aiming for this in a table: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXX______________________________ without the need to do line break or start a new <span><div>or<td>, so basicly the text content (the "X"s) is continuous and the underline needs to fill the whole horizontal width, making <u> an invalid solution. Does anyone know how to make this possible, Thanks in advance! P.S. I am using query to auto fill the text content so the length of the text is not fixed and will change base on the database record Dear all, currently i m having trouble centralizing my buttons in a horizontal line with my text above it. I m hosting my things on blogspot and on a html preview, my html code seems correct for ''my buttons in a horizontal line with my text above it''. But with blogspot, my buttons are vertical instead. My website is www.buttonsupcloset.blogspot.com Below is the sample of my image followed by the text and buttons. <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/101.jpg" /> <table width="800"> <tr><td> <p style="text-align: center;">Sweet Bustier Top (White) <center> <a href="http://ww12.aitsafe.com/cf/add.cfm?userid=E7247990&product= Sweet+Bustier+Tube+(White) &price=22&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/addcart.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/preview.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/checkout.gif" border="0" /></a> </center> </td> <td> <p style="text-align: center;">Sweet Bustier Tube (Purple) <center> <a href="http://ww12.aitsafe.com/cf/add.cfm?userid=E7247990&product= Sweet+Bustier+Tube+(Purple) &price=22&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/addcart.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/preview.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/checkout.gif" border="0" /></a> </center> </td> </table> Hoping someone could help me solve this problem. regards, goddha I was wondering if someone could point me in the right direction here. Given the following: <html><body><table border=1><tr> <td style='vertical-align: bottom;'><pre>Here is one line of preformatted text inside a td tag</pre></td> </tr></table></body></html> Firefox and Internet Explorer display the preformatted text with an extra blank line after the text. Safari seems to display this as I would expect (with no implicit blank line). I've tried playing around with the border, margin, and padding styles, but I can't seem to get rid of the extra blank line within the <td>. Anyone have any ideas ? Thanks, John I'm trying to position text, links and pictures to follow one after the other, but it doesn't work. I want to see "Homepage" on the left corner of my webpage "Next" on the right corner of my webpage Unfortunately this command doesn't work properly. <div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p> It makes the "Next" go down a line, instead of being in the same line of the "Homepage". Also, on that vein, is there any way I can align images and text on the same line without using spaces*? As in: <p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p> But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating. *I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see. I'm using tables and I have text inside one table. When I add line height to text so it looks good in IE6, Safari and Google Chrome, it looks wrong in FireFox and Opera. Every line is over each other. How could I fix this? Here is the code from start to end of the text part: Code: <html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image:url('tausta.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
line-height: 5%;
}
.style2 {color: #
color: #999999;
color: #999999;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; font-weight: bold; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="page">
<table id="Table_01" width="912" height="543" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="14" width="176" height="542" valign="top"><div align="right" class="style1">
<p class="style2"> </p>
<p class="style2"><strong><u>FILES:</u> </strong><u><br>
</u><br>
<br>
<br>
<br>
</p>
</div>
<p align="right" class="style5">Images: </p>
<p align="right" class="style4">images1 <br>
<br>
<br>
<br>
</p>
<p align="right" class="style5">Videos: </p>
<p align="right" class="style4">video1 </p>
<p align="right" class="style4">video2 </p>
<p align="right" class="style4">video3 </p>
<p align="right" class="style1"><span class="style2">1 - video4 </span></p></td>
Hello all, I'm a newb at html, just started some basic coding last week. I've made my first site, though as you can see, the images and text (even if it's a placeholder right now) aren't lined up, and I'm not sure how to tell it to do that. Anybody with more expertise understand my situation, and how to fix it? Thanks! http://elliottetzkorn.com |
|||||||