Моля за помощ за центриране на списък с div !!!

D

didochoko

Registered
Здравейте, искам да помоля за помощта ви, за да центрирам списък поставен в div. Това е прост пример, за да не пиша целия код и за да е по-лесно(Благодаря на всички предварително :)) :



<html>
<head>

<title>Центриран "li"</title>


<style type="text/css">
body {
margin: 0;
}
.main_container {
width: 800px;
margin: 100px auto auto auto;
border: 3px solid red;

}

.main_container ul {
margin:0 auto;
height: 20px;
border: 2px solid black;

}
.main_container ul li {
margin:0 auto;
float: left;
border: 1px solid blue;
list-style-type: none;
text-align: center;

}

</style>
</head>

<body>

<div class="main_container">

<ul><li>1234</li>
<li>5678</li>
<li>0912</li>
</ul>


</div>


</body>
</html>
 
Код: 
<html> 
<head> 

<title>Центриран "li"</title> 


<style type="text/css"> 
body { 
margin: 0; 
} 
.main_container { 
width: 800px; 
margin: 100px auto auto auto; 
border: 3px solid red; 

} 

.main_container ul	{ 
margin:0 auto; 
height: 20px; 
border: 2px solid black; 

} 
.main_container ul li { 
margin:0 auto; 
border: 1px solid blue; 
list-style-type: none; 
text-align: center; 

} 

</style> 
</head> 

<body> 

<div class="main_container" align="center"> 

<ul><li>1234</li> 
<li>5678</li> 
<li>0912</li> 
</ul> 


</div> 


</body> 
</html>

Ако съм разбрал правилно. :idea:

А ако държиш на float:left

пробвай така:

Код: 
<html> 
<head> 

<title>Центриран "li"</title> 


<style type="text/css"> 
body { 
margin: 0; 
} 
.main_container { 
width: 800px; 
margin: 100px auto auto auto; 
border: 3px solid red;
} 

.main_container ul	{ 
margin:0 auto; 
height: 20px; 
border: 2px solid black; 
float: left;
} 
.main_container ul li { 
margin:0 auto; 
border: 1px solid blue; 
list-style-type: none; 
text-align: center; 

} 

</style> 
</head> 

<body> 

<div class="main_container" align="center"> 

<ul><li>1234</li> 
<li>5678</li> 
<li>0912</li> 
</ul> 


</div> 


</body> 
</html>
 
Благодаря ти Logic, но не стана :) И ако е възможно да стане само с промяна на стила. :?
 
didochoko каза:
Благодаря ти Logic, но не стана :) И ако е възможно да стане само с промяна на стила. :?
Увеличете...
В центъра на самата страница ли искаш да го сложиш ?
 
Може би аз не обясних добре, но мисълта ми е съдържанието на списъка (в този случай цифрите "1234" "5678" "0912"), да дойде в средата на "main_container" . Благодаря!
 
ето ти вариант с таблица.

Код: 
<html>
<head>

<title>Центриран "li"</title>


<style type="text/css">
body {
margin: 0;
}
.main_container 
{
width: 800px;
margin: 100px auto auto auto;
border: 3px solid red;

}

.main_container ul 
{
margin: 0px auto;
height: 20px;
border: 2px solid black;
padding: 5px;

}
.main_container ul li {
float: left;
border: 1px solid blue;
list-style-type: none;
text-align: center;

}

</style>
</head>

<body>

<div class="main_container">
<table align="center">
<tr>
<td>
<ul>
<li>1234</li>
<li>5678</li>
<li>0912</li>
</ul>
</td>
</tr>
</table>
</div>


</body>
</html>
 
Благодаря ти dELux_nike, с таблица стана , а възможно ли е да стане само с промяна в стила? :idea: :)
 
пробвай с text-align:center; на дива в който се намира списъка, ако не стане направи нов див в който да сложиш списъка и му придай margin:0 auto; или придай на списъка margin:0 auto :roll:
 
SveXteZ каза:
пробвай с text-align:center; на дива в който се намира списъка, ако не стане направи нов див в който да сложиш списъка и му придай margin:0 auto; или придай на списъка margin:0 auto :roll:
Увеличете...



Не става и в двата варианта :?
 
didochoko каза:
Благодаря ти dELux_nike, с таблица стана , а възможно ли е да стане само с промяна в стила? :idea: :)
Увеличете...

Код: 
<html>
<head>

<title>Центриран "li"</title>


<style type="text/css">
body {
margin: 0;
}
.main_container {
width: 800px;
margin: 100px auto auto auto;
border: 3px solid red;
padding: 20px;
}

.main_container ul {
display: outline;
border: 2px solid black;
padding: 10; margin:0;
}
.main_container li {
border: 1px solid blue;
list-style-type: none;
text-align: center;

}

</style>
</head>

<body>

<div class="main_container">
<ul>
<li>1234</li>
<li>5678</li>
<li>0912</li>
</ul>
</div>


</body>
</html>
 
dELux_nike каза:
didochoko каза:
Благодаря ти dELux_nike, с таблица стана , а възможно ли е да стане само с промяна в стила? :idea: :)
Увеличете...

Код: 
<html>
<head>

<title>Центриран "li"</title>


<style type="text/css">
body {
margin: 0;
}
.main_container {
width: 800px;
margin: 100px auto auto auto;
border: 3px solid red;
padding: 20px;
}

.main_container ul {
display: outline;
border: 2px solid black;
padding: 10; margin:0;
}
.main_container li {
border: 1px solid blue;
list-style-type: none;
text-align: center;

}

</style>
</head>

<body>

<div class="main_container">
<ul>
<li>1234</li>
<li>5678</li>
<li>0912</li>
</ul>
</div>


</body>
</html>
Увеличете...


Но да се запази float: left
 
didochoko каза:
dELux_nike каза:
didochoko каза:
Благодаря ти dELux_nike, с таблица стана , а възможно ли е да стане само с промяна в стила? :idea: :)
Увеличете...

Код: 
<html>
<head>

<title>Центриран "li"</title>


<style type="text/css">
body {
margin: 0;
}
.main_container {
width: 800px;
margin: 100px auto auto auto;
border: 3px solid red;
padding: 20px;
}

.main_container ul {
display: outline;
border: 2px solid black;
padding: 10; margin:0;
}
.main_container li {
border: 1px solid blue;
list-style-type: none;
text-align: center;

}

</style>
</head>

<body>

<div class="main_container">
<ul>
<li>1234</li>
<li>5678</li>
<li>0912</li>
</ul>
</div>


</body>
</html>
Увеличете...


Но да се запази float: left
Увеличете...

:shock:

това няма как да стане ? или поне аз не знам ..
 
dELux_nike каза:
didochoko каза:
dELux_nike каза:
Код: 
<html>
<head>

<title>Центриран "li"</title>


<style type="text/css">
body {
margin: 0;
}
.main_container {
width: 800px;
margin: 100px auto auto auto;
border: 3px solid red;
padding: 20px;
}

.main_container ul {
display: outline;
border: 2px solid black;
padding: 10; margin:0;
}
.main_container li {
border: 1px solid blue;
list-style-type: none;
text-align: center;

}

</style>
</head>

<body>

<div class="main_container">
<ul>
<li>1234</li>
<li>5678</li>
<li>0912</li>
</ul>
</div>


</body>
</html>
Увеличете...


Но да се запази float: left
Увеличете...

:shock:

това няма как да стане ? или поне аз не знам ..
Увеличете...



Благодаря ти за отделеното време :)
 
shterev каза:
Ами как искаш да ти проработи margin:0 auto;, след като не си сложил доктайп?
Увеличете...


По принцип е сложен във файла : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, просто не съм го поставил в началото :oops:
 
dELux_nike каза:
а щом искаш листа центриран защо искаш и да се флотва в ляво ? :idea:
Увеличете...

Защото това са страници за сайт, но само HTML и CSS, без PHP :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе