html - Centrering - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #9485 @ 26.09.10 17:18

Hej Udviklere.

Jeg synes jeg har haft problemer med det her altid, og nu håber jeg der er en der kender et knifty trick til at løse mit problem.

Det er den evige kamp med at centrere ting på skærmen.

Jeg bruger selvfølgelig samtlige margin: 0 auto; etc. Men jeg har problemer med at få centreret div bokse om har en float.

Hvis jeg vil have 2 div bokse til at stå ved siden af hindanden (ikke under/over) så ville jeg gøre det sådan her:

Kode

<style>
.boks
{
width: 200px;
height: 100px;
float: left;
margin: 25px;
}
</style>
<div class='boks'>lala</div><div class='boks>lala 2</div>

For så at centrere dette har jeg prøvet alle mulige forskellige ting igennem tiden, og nogle gange virker det, andre gange ikke. Jeg kan ikke lige komme i tanke om noget pt, men jeg har siddet og leget med en container.

Kode

<style>
#container
{
width: 100%;
margin: 0 auto;
}
</style>
<div id='container'></div>

Men lige lidt hjælper det. Er det en fool-proof metode til _altid_ at centrere ét element, hvorefter alle childs til elementet kan flyve rundt inde i parent som de lyster?

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 26.09.10 18:21

4.283

Så prøver jeg at vise det med lidt kode.

HTML kode

 <div class="center" style="width: 80%; margin: 0 auto; clear: both;">
     <div style="border: 1px solid #ccc;">
         <!-- block 1 -->
     </div>
 </div>
 <div class="center" style="width: 80%; margin: 0 auto; clear: both;">
     <div class="float_left" style="width: 45%; margin-right: 10%; float: left;">
         <div style="border: 1px solid #ccc;">
             <!-- block 2 -->
         </div>
     </div>
     <div class="float_right" style="width: 45%; float: right;">
         <div style="border: 1px solid #ccc;">
             <!-- block 3 -->
         </div>
     </div>
 </div>
 <div class="center" style="width: 80%; margin: 0 auto; clear: both;">
     <div style="border: 1px solid #ccc;">
         <!-- block 4 -->
     </div>
 </div>

Indlæg senest redigeret d. 26.09.2010 19:28 af Bruger #10216

Bruger #10325 @ 12.10.10 18:05

Hej Gnu,

Super det virker fint (undskylder jeg ikke lige havde fået givet point. Der kom lige en hel masse ting).

Hvordan vil du klare samme problem med en enkelt div?

Jeg har en der ser sådant her ud:

Kode

div#gallery
{
	width: 850px;
	height: 500px;
	background: #959595;
	border: 5px solid white;
    /*filter:alpha(opacity=60);
    opacity: 0.60;*/
	position: fixed;
	border-radius: 50px;
	margin: 0 auto;
	z-index: 10;
	color: white;
	text-align: center;
}

Jeg har faktisk en del problemer med dette hø.

Jeg har en side hvor min baggrund er 100% width, og 100% height, no matter what. Der har jeg så billeder som der roterer. Dertil har min test-person sagt der er problemer på hendes mac når hun klikker på menuen (som er fixed), og nogle gange bliver den skubbet (hvilket jo ikke burde ske da alt er 100%).

Nu har jeg den her div (flere af dem faktisk, men samme princip, og kun én synlig), som der heller ikke vil centrere sig 100%.

Kan jeg lave noget i stil med det her:

Kode

<body style='margin:0 auto;padding:0 auto;'>
<div id='sitewrap' style='width:100%;height:100%>
<!--jQuery sørger for disse roterer og de er 100% width, 100% height-->
<div id='bg_rotate'>
<img id='1' /> 
<img id='2' />
</div>

<div id='boks' style='width:80%;height:100%;>
<div id='box_der_skal_centereres' style='margin:0 auto;'></div>
</div>

</div>
</body>

Det virker selvfølgelig ikke, men håber du kan se dilemmaet.

Bruger #10216 @ 26.09.10 17:43

4.283

lave dine 2 bokse inde i en boks der er centreret - det andet kan man ikke...

Kode

<div class="center"><div class="float_left"></div><div class="float_right"></div></div>

Resten er som sådan rigtig nok.

Bruger #9485 @ 26.09.10 17:51

Problemet er at hvis jeg bruger float:left,right som du siger, så bliver de smækket helt ud i hhv. venstre og højre side. De er ikke centreret.

Her er det jeg egentlig arbejder med:

HTML kode

 <div id='content_container'>
     //Bemærk jeg styler left her.
     <div style='float:left;'>
         <div class='boxheader'></div>
             <div class='box_content'>
                  <?php
                 if($disabled == 0)
                 {
                 ?>
                 <h1>Site is currently: Running</h1>
                 <p>Do you really want to disable the site?</p>
                 <p>
                     <?php
                         echo form_open('admin/disable_site');
                         echo form_submit('DisableSite', 'Yes Disable');
                         echo form_close();
                     ?>
                 </p>
                 <?php
                 }
                 else
                 {
                 ?>
                 <h1>Site is currently: Disabled</h1>
                 <p>Do you want to enable the site again?</p>
                 <p>
                     <?php
                         echo form_open('admin/disable_site');
                         echo form_submit('DisableSite', 'Yes Enable');
                         echo form_close();
                     ?>
                 </p>
                 <?php
                 }
                 ?>
             </div>
     </div>
     //Bemærk jeg styler right her.
     <div style='float:right;'>            
         <div class='boxheader'></div>
             <div class='box_content'>
                 <p><i>Current Service Message:</i></p>
                 <p><?php 
                     echo form_open('admin/update_service_msg');
                     echo form_textarea($textarea_data); 
                     echo form_submit('UpdateServiceMsg', 'Update Maintanance Text'); 
                     echo form_close();
                     ?>
                 </p>
             </div>
     </div>
 </div>

og css:

CSS kode

 /* Boksen som gerne skulle centrere*/
 div#content_container
 {
     margin: 0 auto;
     width: 100%;
 }
 
 /* Content boks*/
 div.box_content
 {
     width: 398px;
     height: 150px;
     background-color: #dbe9a1;
     border-color: #65770b;
     border-style: solid;
     border-top-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-right-width: 1px;
     display: table-cell;
     vertical-align: middle;
 }
 /* Header på content boks*/
 div.boxheader
 {
     width: 400px;
     height: 20px;
     background-image: url('images/admin/boxheader.png');
     background-repeat: no-repeat;
 }

Edit: Hvis de 2 <divs> bliver float:left;'et så er de ved siden af hinanden men ovre til venstre.

Indlæg senest redigeret d. 26.09.2010 17:53 af Bruger #9485

Centrering

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler