Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Centrera text i HTML/CSS

Svara
2010-11-07, 13:42
  #1
1k
Medlem
1ks avatar
Hej, om vi säger att jag har en nästan fyrkantig ruta som jag vill skriva centrerad text i, alltså den ska vara centrerad från top-botten och från vänster-höger, deadspot alltså.

Man kan ju köra med padding i css men jag är säker på att det finns ett enklare sätt att göra detta på.

T.ex navigationsystemet på FB, "Chat | Prenumerationer | Populära ämnen | Heta ämnen | etc etc"

Har dom bara använt padding?
__________________
Senast redigerad av 1k 2010-11-07 kl. 14:05.
Citera
2010-11-07, 14:08
  #2
Dakniel
Medlem
Dakniels avatar
Kod: 
<div class="top-outer" style="padding: 0px 10px;">
<ul id="top-tabs">

.top-outer {
	height:auto;
	padding:10px 0px;
}

ul#top-tabs {
	list-style-image:none;
	list-style-position:outside;
	list-style-position:none;
	list-style:none;

	float:left;

	padding:0px;
	margin:0px;
	width:100%;
	margin-bottom:5px;

	border-color:#ddd;
	border-style:solid;
	border-width:0 0 1px 1px;
	border-top:1px solid #ddd;
}


Där har du deras kod om jag inte missade något .
Citera
2010-11-07, 14:09
  #3
1k
Medlem
1ks avatar
Jag har kollat igenom deras kod, men använder dom faktiskt den enkla metoden padding? Texten kommer inte att bli exakt centrerad, det kommer ju att skilja någon pixel som inte syns men rätt ska vara rätt.
Citera
2010-11-07, 20:06
  #4
understreck
Medlem
understrecks avatar
För att centrera <p> både horisontellt och vertikalt i exemplet nedan;

- Sätt position till relative.
- Sätt top till 50%.
- Sätt font-size till ett givet värde och förslagsvis även line-height till ett givet värde.
- Sätt text-align till center.
- Sätt margin-top till halva elementets höjd, dvs halva line-height (line-height 1 betyder 1*fontstorlek).


HTML-kod: 
<html>

<head>

<style type="text/css">

	html, body {
		height: 100%;
	}

	body {
		margin: 0;
		padding: 0;
	}

	p {
		position: relative;
		top: 50%;
		font: 14px/1;
		text-align: center;
		height: 14px;
		margin-top: -7px;
	}

</style>

</head>


<body>
	<p>Placeholder</p>
</body>

</html>
Citera
2010-11-09, 13:54
  #5
ZiinLoader
Avstängd
Ett tips, jag brukar oftast köra på denna och finner den väldigt bra och användarvänlig.

Kod: 
index.html:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" src="style.css" type="style/css">
<title></title>
</head>
<body>
<div id="rightmeny">
--innehåll--
</div>
<div id="container">
--innehåll--
</div>
<body>
</html>

***************************************************************
style.css:

   #container{
   margin: 0 auto;
   text-align: center;
   width: 960px;
   height: auto;
   border: 1px solid black; // bara för att se hur boxen ser ut
   }

#rightmeny{
   width: 125px;
   height: 125px;
   float: right;
   border: 1px solid black;
   }

så kan du lägga in andra saker runt omkring om du lägger dem utanför container divtaggen. Typ slänga in en meny med {float: right/left;} i css filen så kommer det bli snyggt. Du kan bygga ut den massor och floata runt saker till höger och vänster.

Hoppas det var till någon hjälp.
Citera
2010-11-11, 05:43
  #6
xcs101
Medlem
För att centrera text vertikalt i en div så är det enklaste sättet att sätta line-height till samma height som diven i fråga har.

Så har du en hieght på 30px; så sätter du line-height till 30px

enkelt och bra.
Citera
2010-11-11, 12:47
  #7
KaptenAlma
Medlem
KaptenAlmas avatar
Varför krångla till det, padding funkar ju fint?
Citera
2010-11-11, 14:10
  #8
maik-
Medlem
text-align: center;
vertical-align: text-middle;

???
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback