1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Unable to Align Text in Center in DIV

Discussion in 'CSS' started by spyece, Nov 24, 2011.

0
  1. #1
    Hello Guys,
    I am a beginner at css and for the page i am coding i want to make a div with content like this.

    http://testbox.co.cc/css/sq-box.jpg

    So far i tried my best, aligned the text to center, vertically middle but still i am not getting the output as in the above image.

    http://testbox.co.cc/css/box.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.square-box-1 {
	height: 142px;
	width: 142px;
	border:solid;
	background-color: #096467;
	border-width: 10px;
	border-color: #383535;
	vertical-align: middle;
	text-align: center;
	}
 
.box-text {
	vertical-align:middle;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	line-height:17px;
	font-size:11px;
	color:#fff;
	text-decoration:underline;
}
 
.box-date {
	vertical-align:middle;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:500;
	color:#2e2e2e;
}
</style>
</head>
<body>
 
<!--  Box 01 Start -->
<div class="square-box-1">
<span class="box-text">Its So Cold Out Here that My Amazing Bike Has Frozen to Death</span><br />
<span class="box-date">26. Nov 2011</span>
 
</div>
<!--  Box 01 End -->
</body>
</html>
    Code (markup):
    If Anyone can help, ill really appreciate it.

    Thanks in Advance.
     
    spyece, Nov 24, 2011 IP
  2. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #2
    Do you have a working code for the box that works?

    If you do have a look at the source doe and work out how they have done this. I expect if this is a working example not just done in photoshop that you could use the padding attribute to align the text in the box better
     
    Toycel, Nov 25, 2011 IP
  3. spyece

    spyece Active Member

    Messages:
    595
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    90
    Digital Goods:
    1
    #3
    Hello, Actually its Design that i Made and I tried the padding too it didn't worked so used table-cell attribute and it did it.

    http://testbox.co.cc/css/myspicylife/

    Now trying a way to figure out how to add space between those boxes - Margin, Padding is not working on them :(
     
    spyece, Nov 25, 2011 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    1) you're trying to fix the height of a container with text inside it... /FAIL/ at web development.

    2) px fonts, so pissing on accessibility too.

    3) CSS/div cannot do VERTICAL alignment, which is what I'm assuming you are asking for... well, not entirely true as there is display:table-cell, but that's not really viable cross browser in most cases and more worth avoiding.

    Lose the fixed height, lose the px fonts for %/em, and pad the top/bottom... that way the box sizes to fit it's content; otherwise you're treading into the "but I can do it in photoshop" nonsense that flushes the accessibility and usability of countless websites. I'd also cut back on the spans and classes for nothing... and use classes to describe WHAT it is, not what it looks like.

    So something more like this:

    
<div class="newsItem">
	Its So Cold Out Here that My Amazing Bike Has Frozen to Death
	<div>26. Nov 2011</div>
<!-- .newsItem --></div>
    Code (markup):
    
.newsItem {
	width:142px;
	padding:1.4em 0;
	text-align:center;
	font:normal 100%/140% tahoma,geneva,sans-serif;
	text-decoration:underline;
	color:#FFF;
	background:#096467;
	border:10px solid #383535;
}

.newsItem div {
	padding-top:0.4em; /* just to make it pretty */
	font:bold 110%/140% tahoma,geneva,sans-serif;
	text-decoration:none;
}
    Code (markup):
    Though that underline usually means it's an Anchor, people will be confused if you can't click on it... which is why you should be writing semantic markup of what the content IS long before you even start thinking layout and presentation. (see why this whole trend of drawing some goof assed picture in photoshop before you even have the content marked up is 100% idiocy and a miserable /FAIL/ at web design -- if the end result is useless to visitors, it doesn't matter how pretty it is)
     
    deathshadow, Nov 25, 2011 IP
  5. leanocodes

    leanocodes Member

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    Hi Spyece,

    Adding a padding attribute to square-box-1 class would solve the problem. But be careful since padding would definitely add up to the div's height, so whatever value you put in the padding, you must deduct it to the div's height or width.

    That should make it work.

    Cheers.
     
    leanocodes, Nov 26, 2011 IP
  6. itpixelz

    itpixelz Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    give some padding make text align to justify both for box and for span tag. Don't make it text align center.
     
    itpixelz, Nov 26, 2011 IP
  7. pobex

    pobex Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>




<style type="text/css">
html, body { margin:0; padding:0; }
html, body { color:white; font-size:12px; line-height:17px; }
.square-box { float:none; display:table; width:122px; margin:0; padding:15px 0; background-color:#096467; border:solid #373634 10px; }
.square-box span { float:left; display:inline; width:100px; padding:5px 11px; text-align:center; }
</style>
</head>
<body>
<div class="square-box">
    <span><u>It's So Cold in here now, that my bike hasfrozen to death</u></span>
    <span>26. Nov 2011</span>    
</div>




</body>
</html>
    HTML:


    is ok?
     
    pobex, Dec 8, 2011 IP