Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[CSS] Centrera DIVar med float

1
Skriv svar
Permalänk
Medlem
●

[CSS] Centrera DIVar med float

Hur kan man centrera några DIVar som har float: left utan att använda en container med fast vidd?

DIVarna nedan får inte ha fast vidd.

<style>
.divtest {
	border: 1px solid black;
	margin: 5px;
	float: left;
}
</style>
<div class="divtest">text1</div>
<div class="divtest">text2</div>
<div class="divtest">text3</div>
<div class="divtest">text4</div>

http://www.denniskarlsson.com/divtest.html

Redigera
Citera flera Citera
Permalänk
Medlem
●

[CSS] Centrera DIVar med float

Testa detta!

<style>
.divtest {
border: 1px solid black;
margin: 5px;
float: left;
}
</style>
<table align="center">
<tr>
<td>
<div class="divtest">text1</div>
<div class="divtest">text2</div>
<div class="divtest">text3</div>
<div class="divtest">text4</div>
</td>
</tr>
</table>

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Dina .divtest får inte ha fast vidd heller?

...och centrera något med float:left låter lite motstägelsefullt, eller menar du att divvarna ska ligga rakt med varandra i vänsterledd, eller något?

Får .divtest ha fast vidd kan du ju köra:

<style>
.divtest {
    border: 1px solid black;
    width: 300px
    left: 50%
    margin: -150px;
    float: left;
}
</style>

Alltså, left: 50% ger vänsterkanten centrerad, sedan margin -150px för att centrera.

Men, det går ju inte om du kör utan bestämd width. Kanske går med lite JavaScript, där du hämtar bredden och sedan ändrar CSSen?

Visa signatur

Modermodem från ONOFF och bildskärmsutrustning från Electrolux. US Robotics 28.8K telefonuppringd internetförbindelse. Har en förkärlek för tysk tjejpop.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hej

Tack för svaret. Nej, DIVarna får inte ha fast vidd. Däremot behöver inte de inte ligga till vänster.
De behöver bara ligga vid sidan av varandra.

Redigera
Citera flera Citera
Permalänk
Medlem
●

kan du använda % istället för en fast angiven bredd ?

Visa signatur

Har varit på detta forum på tok för länge...

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://www.hoglind.org/css-solutions/

kanske kan vara något?

Visa signatur

You're my size I need to try you on

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av UndCon
kan du använda % istället för en fast angiven bredd ?

Procent funkar nog inte då jag vill att boxarna ska max vara lika bred som innehållet.

Här är den sida som jag håller på med. Nu använder den en tabell för att göra detta, men jag skulle vilja använda mig av DIV istället.
http://www.dennis.se/imgs/startpage20060404.png

Citat:

Ursprungligen inskrivet av BenWillis
http://www.hoglind.org/css-solutions/

kanske kan vara något?

css-solutions verkar inte vara rätt lösning det heller.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Alla boxar på den länkade bilden har ju samma bredd?

Det går att centrera dynamisk bredd, men det blir ingen snygg lösning. Har du inte något som har fast bredd?

Om boxarna ska ha fast bredd kan du göra såhär, där 700 ska motsvara 3 boxars bredd + borders + margins.

<div id="container" style="width: 700px; margin: 0px auto;">
    <div class="divtest">text1</div>
    <div class="divtest">text2</div>
    <div class="divtest">text3</div>
    <div class="divtest">text4</div>
</div>

Du kan också låta containern vara utan bredd, den centreras ändå, men då måste du göra "clear: left" på den första boxen som är ny på varje rad för att inte hela sidan ska komma på bredden.

Ju mer man förklarar, ju bättre svar får man.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av TechGuru
Alla boxar på den länkade bilden har ju samma bredd?

Det går att centrera dynamisk bredd, men det blir ingen snygg lösning. Har du inte något som har fast bredd?

Om boxarna ska ha fast bredd kan du göra såhär, där 700 ska motsvara 3 boxars bredd + borders + margins.

<div id="container" style="width: 700px; margin: 0px auto;">
    <div class="divtest">text1</div>
    <div class="divtest">text2</div>
    <div class="divtest">text3</div>
    <div class="divtest">text4</div>
</div>

Du kan också låta containern vara utan bredd, den centreras ändå, men då måste du göra "clear: left" på den första boxen som är ny på varje rad för att inte hela sidan ska komma på bredden.

Ju mer man förklarar, ju bättre svar får man.

Boxarna får inte ha fast vidd och de får inte ligga i en container med fast vidd. Det är det som är problemet.

Bilden visar bara en av många personers startsidor. Just den här personens startsida har få och ganska lika kolumner, men en del har dubbelt så många kolumner och en del har väldigt breda kolumner.

edit: http://www.dennis.se/start/?test

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jo men alla boxar har samma bredd även på den sidan... Om du kör ASP eller PHP kan du ju generera bredden så att den blir fast, men man kan ställa in värdet på bredden själv. Mkay?

Och "Du kan också låta containern vara utan bredd, den centreras ändå, men då måste du göra "clear: left" på den första boxen som är ny på varje rad för att inte hela sidan ska komma på bredden." funkar ändå om du vill ge dig in på det.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av TechGuru
Jo men alla boxar har samma bredd även på den sidan... Om du kör ASP eller PHP kan du ju generera bredden så att den blir fast, men man kan ställa in värdet på bredden själv. Mkay?

Jag har ju nyss sagt att sidan har många användare, Bara för att du fått se två stycken som har väldigt lika boxar så betyder väl inte det att jag ljuger i föregående inägg.

Titta på testanvändaren nu då om det känns bättre.

Citat:

Ursprungligen inskrivet av TechGuru
Och "Du kan också låta containern vara utan bredd, den centreras ändå, men då måste du göra "clear: left" på den första boxen som är ny på varje rad för att inte hela sidan ska komma på bredden." funkar ändå om du vill ge dig in på det.

Jag har försökt göra på det sätt du skriver och det funkar inte då DIVarna tar det utrymme de får om de inte FLOATas.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Bytte ut float: left; mot display: inline; och lade till den hederliga gamla <center> taggen

<style>

.divtest {

border: 1px solid black;

margin: 5px;

display: inline;

}

</style>
<center>

<div class="divtest">text1</div>

<div class="divtest">text2</div>

<div class="divtest">text3</div>

<div class="divtest">text4</div>
</center>

Visa signatur

http://fredlight.no-ip.org
- Trust in me. I have come to save this world.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av FredLight
Bytte ut float: left; mot display: inline; och lade till den hederliga gamla <center> taggen

Ska testa detta. Men center borde gå att byta ut mot en div med text-align center va?

Redigera
Citera flera Citera
Permalänk
Medlem
●

osäker på det, det är ju hela "divvarna" som ska centreras..
Underskatta inte center-taggen

Visa signatur

http://fredlight.no-ip.org
- Trust in me. I have come to save this world.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av FredLight
osäker på det, det är ju hela "divvarna" som ska centreras..
Underskatta inte center-taggen

Testade båda. DIVarna verkar vilja ta 100% av skärmen oavsett. :/

Kanske beror på att jag har grejjer i boxarna som floatas till höger.
Känns som jag provat det mesta nu, jag får nog behålla tabellen ett tag till.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Alltså, du vill ha boxarna centrerade på din sida, eller centrerade innuti en annan div?
http://fredlight.no-ip.org/divtest.html <--

Visa signatur

http://fredlight.no-ip.org
- Trust in me. I have come to save this world.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av FredLight
Alltså, du vill ha boxarna centrerade på din sida, eller centrerade innuti en annan div?
http://fredlight.no-ip.org/divtest.html <--

Ska kolla på det här lite mer. Tror det beror på att jag har högerjusterat innehåll i DIVen som gör att de blir 100%.
Ska testa att ta bort det högerjusterade. Ska äta först.

Tack!

Redigera
Citera flera Citera
Permalänk
Medlem
●
<html>
<head>
<style type="text/css">
.divtest {
	border: 1px solid black;
	margin: 5px;
	padding: 2px;
	display: inline;
	text-align:left;
}

body {
	text-align:center;
}
</style>
</head>

<body>
	<div class="divtest">text1</div>
	<div class="divtest">text2</div>
	<div class="divtest">lite mer text</div>
	<div class="divtest">text4</div>
</body>
</html>

Modifierade fredlights. Har inte testade den dock, men borde ju funka. Då text-align fungerar på inline-element så borde de ju centreras.

EDIT: La till text-align:left på divtest, annars blir det nog centrerat i boxarna också.

Visa signatur

Drinkpinnen.com - Ny, växande drinksida. Hitta Din favoritdrink!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

trey: Funkar enbart om alla boxar har samma höjd, det har de inte. Dessutom kommer ju ny box att bli centrerad om den är ensam på en rad, borde ju ligga till vänster.

denka: Trust me on this one. Det är omöjligt att centrera med en layout som du har på testanvändaren nu utan att känna till en enda bredd i förväg.

En container-div blir bara så stor som inneslutna divs om de inneslutna divvarna har fast bredd. Containern går bara att centrera om den har en bredd, antringen angiven direkt, eller indirekt genom fast bredd på det innelutna innehållet.

http://lowtech.dyndns.org/denka/1.htm
http://lowtech.dyndns.org/denka/2.htm

De visa på de problem som gör det omöjligt att få det som testanvändaren visar om du ska ha allt helt dynamiskt.

Det närmsta man kan komma om du vill ha så mycket dynamiskt som möjligt är att man har fast bredd enbart på containern.
http://lowtech.dyndns.org/denka/3.htm

Kan vara av hjälp: http://www.quirksmode.org/css/centering.html

Går möjligen att lösa allt på klientsidan med JavaScript, men inte ren html+css.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av TechGuru
...

Ja, du har rätt i allt du säger.

Men istället för att hitta på en fullösning med javascript eller att i förväg på serversidan lista ut hur bred en kolumn blir så tror jag faktiskt att jag håller mig den tabell som i nuläget fungerar perfekt.

Tack för hjälpen alla. Kanske CSS3 fixar detta!?

Senast redigerat
Redigera
Citera flera Citera
1
Skriv svar